@dynatrace/strato-components 3.0.1 → 3.1.1

package/esm/charts/core/components/annotations/components/overlays/AnnotationsScrollWrapper.css

@@ -1,4 +1,4 @@
-._uzgvu30-3-0-1 {
+._uzgvu30-3-1-1 {
   position: relative;
   overflow-x: hidden;
   overflow-y: auto;

package/esm/charts/core/components/annotations/components/overlays/AnnotationsScrollWrapper.sty.js

@@ -1,5 +1,5 @@
 import "./AnnotationsScrollWrapper.css";
-var scrollWrapper = "_uzgvu30-3-0-1";
+var scrollWrapper = "_uzgvu30-3-1-1";
 export {
   scrollWrapper
 };

package/esm/charts/core/components/annotations/components/overlays/AnnotationsScrollWrapper.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/overlays/AnnotationsScrollWrapper.css.ts"],
-  "sourcesContent": ["import './AnnotationsScrollWrapper.css';\nexport var scrollWrapper = '_uzgvu30-3-0-1';"],
+  "sourcesContent": ["import './AnnotationsScrollWrapper.css';\nexport var scrollWrapper = '_uzgvu30-3-1-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,gBAAgB;",
   "names": []
 }

package/esm/charts/core/components/axes/Axis.css

@@ -1,4 +1,4 @@
-._90oaxp0-3-0-1 {
+._90oaxp0-3-1-1 {
   display: block;
   overflow: visible;
 }

package/esm/charts/core/components/axes/Axis.sty.js

@@ -1,5 +1,5 @@
 import "./Axis.css";
-var axis = "_90oaxp0-3-0-1";
+var axis = "_90oaxp0-3-1-1";
 export {
   axis
 };

package/esm/charts/core/components/axes/Axis.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/axes/Axis.css.ts"],
-  "sourcesContent": ["import './Axis.css';\nexport var axis = '_90oaxp0-3-0-1';"],
+  "sourcesContent": ["import './Axis.css';\nexport var axis = '_90oaxp0-3-1-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,OAAO;",
   "names": []
 }

package/esm/charts/core/components/axes/components/PanningControls/PanningControls.css

@@ -1,4 +1,4 @@
-@keyframes _3rbllj2-3-0-1 {
+@keyframes _3rbllj2-3-1-1 {
   0% {
     transform: translateX(-4px);
     opacity: 0.2;
@@ -8,7 +8,7 @@
     opacity: 1;
   }
 }
-@keyframes _3rbllj3-3-0-1 {
+@keyframes _3rbllj3-3-1-1 {
   0% {
     transform: translateX(4px);
     opacity: 0.2;
@@ -18,7 +18,7 @@
     opacity: 1;
   }
 }
-._3rbllj4-3-0-1 {
+._3rbllj4-3-1-1 {
   opacity: 0;
   height: 100%;
   position: absolute;
@@ -34,29 +34,29 @@
   animation-delay: 0.2s;
   animation-fill-mode: forwards;
 }
-._3rbllj5-3-0-1 {
+._3rbllj5-3-1-1 {
   left: 0;
-  animation-name: _3rbllj2-3-0-1;
+  animation-name: _3rbllj2-3-1-1;
 }
-._3rbllj6-3-0-1 {
+._3rbllj6-3-1-1 {
   right: 0;
-  animation-name: _3rbllj3-3-0-1;
+  animation-name: _3rbllj3-3-1-1;
 }
-._3rbllj7-3-0-1 {
+._3rbllj7-3-1-1 {
   color: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._3rbllj7-3-0-1:hover {
+._3rbllj7-3-1-1:hover {
   color: var(--dt-colors-icon-neutral-subdued-hover, #434465);
 }
-._3rbllj7-3-0-1:active {
+._3rbllj7-3-1-1:active {
   color: var(--dt-colors-icon-neutral-subdued-active, #2f2f4f);
 }
-._3rbllj5-3-0-1 ~ div {
-  --_3rbllj0-3-0-1: rgba(0, 0, 0, 0) 12px, rgba(0, 0, 0, 1) 40px;
+._3rbllj5-3-1-1 ~ div {
+  --_3rbllj0-3-1-1: rgba(0, 0, 0, 0) 12px, rgba(0, 0, 0, 1) 40px;
 }
-._3rbllj6-3-0-1 ~ div {
-  --_3rbllj1-3-0-1: rgba(0, 0, 0, 1) calc(100% - 40px), rgba(0, 0, 0, 0) calc(100% - 12px);
+._3rbllj6-3-1-1 ~ div {
+  --_3rbllj1-3-1-1: rgba(0, 0, 0, 1) calc(100% - 40px), rgba(0, 0, 0, 0) calc(100% - 12px);
 }
-._3rbllj4-3-0-1 ~ div {
-  mask: linear-gradient(90deg, var(--_3rbllj0-3-0-1, rgba(0,0,0,1) 0%), var(--_3rbllj1-3-0-1, rgba(0,0,0,1) 0%));
+._3rbllj4-3-1-1 ~ div {
+  mask: linear-gradient(90deg, var(--_3rbllj0-3-1-1, rgba(0,0,0,1) 0%), var(--_3rbllj1-3-1-1, rgba(0,0,0,1) 0%));
 }

package/esm/charts/core/components/axes/components/PanningControls/PanningControls.sty.js

@@ -1,7 +1,7 @@
 import "./PanningControls.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var panningArrow = "_3rbllj7-3-0-1";
-var panningButtons = _7a468({ defaultClassName: "_3rbllj4-3-0-1", variantClassNames: { direction: { toLeft: "_3rbllj5-3-0-1", toRight: "_3rbllj6-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
+var panningArrow = "_3rbllj7-3-1-1";
+var panningButtons = _7a468({ defaultClassName: "_3rbllj4-3-1-1", variantClassNames: { direction: { toLeft: "_3rbllj5-3-1-1", toRight: "_3rbllj6-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   panningArrow,
   panningButtons

package/esm/charts/core/components/axes/components/PanningControls/PanningControls.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/axes/components/PanningControls/PanningControls.css.ts"],
-  "sourcesContent": ["import './PanningControls.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var panningArrow = '_3rbllj7-3-0-1';\nexport var panningButtons = _7a468({defaultClassName:'_3rbllj4-3-0-1',variantClassNames:{direction:{toLeft:'_3rbllj5-3-0-1',toRight:'_3rbllj6-3-0-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './PanningControls.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var panningArrow = '_3rbllj7-3-1-1';\nexport var panningButtons = _7a468({defaultClassName:'_3rbllj4-3-1-1',variantClassNames:{direction:{toLeft:'_3rbllj5-3-1-1',toRight:'_3rbllj6-3-1-1'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,eAAe;AACnB,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,WAAU,EAAC,QAAO,kBAAiB,SAAQ,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/core/components/canvas/utils/create-canvas-gradient.js

@@ -1,3 +1,4 @@
+import { color as d3Color } from "d3-color";
 import { scaleLinear } from "d3-scale";
 import { isEmpty } from "lodash-es";
 import Colors from "@dynatrace/strato-design-tokens/colors";
@@ -27,13 +28,17 @@ function fillGradient(context, color) {
   context.globalAlpha = 0.8;
   context.save();
 }
+function toTransparentRgba(color) {
+  const parsed = d3Color(color);
+  return parsed !== null ? parsed.copy({ opacity: 0 }).formatRgb() : "rgba(0,0,0,0)";
+}
 function createGradientPattern(context, height, domain, color, theme) {
   const onlyPositiveValues = domain[0] >= 0;
   const onlyNegativeValues = domain[1] <= 0;
   const strokeColor = getCanvasColor(color);
   const backgroundColor = getCanvasColor(Colors.Theme.Background["10"]);
   const backgroundColorRgb = isEmpty(backgroundColor) ? DEFAULT_BACKGROUND_DARK : backgroundColor;
-  const transparentRgba = `${backgroundColorRgb}00`;
+  const transparentRgba = toTransparentRgba(backgroundColorRgb);
   const gradient = context.createLinearGradient(0, 0, 0, height);
   const LightThemeAlpha = 0.4;
   const DarkThemeAlpha = 0.6;

package/esm/charts/core/components/canvas/utils/create-canvas-gradient.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/canvas/utils/create-canvas-gradient.ts"],
-  "sourcesContent": ["import { scaleLinear } from 'd3-scale';\nimport { isEmpty } from 'lodash-es';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { getCanvasColor } from './canvas-color.js';\n\nexport type ShapeBuilderPayload = {\n  context: CanvasRenderingContext2D;\n};\nexport type CanvasGradientGenerator = (props: ShapeBuilderPayload) => void;\n\nexport const DEFAULT_BACKGROUND_DARK = '#000000';\n\ninterface CanvasGradientProps {\n  height: number;\n  color: string;\n  domain: number[];\n  theme: 'light' | 'dark';\n}\n\n/**\n * Given a predefined height, a color and the domain of the data, it creates a linear gradient from top to bottom, bottom to top, or one that goes both directions depending on the domain.\n * @param height - given chart height\n * @param color - given main color of the gradient\n * @param domain - given domain of the chart\n * @param theme - current theme\n * @returns CanvasGradientGenerator\n * @internal\n */\nexport function createCanvasGradient({\n  height,\n  color,\n  domain,\n  theme,\n}: CanvasGradientProps): CanvasGradientGenerator {\n  return ({ context }) => {\n    const gradient = createGradientPattern(\n      context,\n      height,\n      domain,\n      color,\n      theme,\n    );\n\n    fillGradient(context, gradient);\n  };\n}\n\n/**\n * Gives color to the last path drawn in the CanvasContext, and then closes the path.\n * @param context - given canvas context\n * @param color - given color to apply to gradient\n */\nfunction fillGradient(\n  context: CanvasRenderingContext2D,\n  color: CanvasGradient,\n) {\n  context.fillStyle = color;\n\n  context.fill();\n  context.closePath();\n  context.globalAlpha = 0.8;\n  context.save();\n}\n\n/**\n * Creates a linear gradient from color to transparent white.\n *\n * Depending on the given domain, it creates a linear gradient from top to bottom, bottom to top, or one that goes both directions.\n *\n * @param context - given canvas context\n * @param height - given mask height\n * @param domain - given data domain\n * @param color - main color of the gradient\n * @param theme - current Theme\n */\nfunction createGradientPattern(\n  context: CanvasRenderingContext2D,\n  height: number,\n  domain: number[],\n  color: string,\n  theme: 'light' | 'dark',\n): CanvasGradient {\n  const onlyPositiveValues = domain[0] >= 0;\n  const onlyNegativeValues = domain[1] <= 0;\n  const strokeColor = getCanvasColor(color);\n  const backgroundColor = getCanvasColor(Colors.Theme.Background['10']);\n  const backgroundColorRgb = isEmpty(backgroundColor)\n    ? DEFAULT_BACKGROUND_DARK\n    : backgroundColor;\n  const transparentRgba = `${backgroundColorRgb}00`;\n\n  const gradient = context.createLinearGradient(0, 0, 0, height);\n  const LightThemeAlpha = 0.4;\n  const DarkThemeAlpha = 0.6;\n  context.globalAlpha = theme === 'light' ? LightThemeAlpha : DarkThemeAlpha;\n\n  if (onlyPositiveValues) {\n    gradient.addColorStop(0, strokeColor);\n    gradient.addColorStop(1, transparentRgba);\n  } else if (onlyNegativeValues) {\n    gradient.addColorStop(0, transparentRgba);\n    gradient.addColorStop(1, strokeColor);\n  } else {\n    const scale = scaleLinear().domain(domain).range([1, 0]);\n\n    const zeroLineStop = scale(0) ?? 0.5;\n\n    gradient.addColorStop(0, strokeColor);\n    gradient.addColorStop(zeroLineStop, transparentRgba);\n    gradient.addColorStop(1, strokeColor);\n  }\n\n  return gradient;\n}\n"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AAExB,OAAO,YAAY;AAEnB,SAAS,sBAAsB;AAOxB,MAAM,0BAA0B;AAkBhC,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiD;AAC/C,SAAO,CAAC,EAAE,QAAQ,MAAM;AACtB,UAAM,WAAW;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,iBAAa,SAAS,QAAQ;AAAA,EAChC;AACF;AAOA,SAAS,aACP,SACA,OACA;AACA,UAAQ,YAAY;AAEpB,UAAQ,KAAK;AACb,UAAQ,UAAU;AAClB,UAAQ,cAAc;AACtB,UAAQ,KAAK;AACf;AAaA,SAAS,sBACP,SACA,QACA,QACA,OACA,OACgB;AAChB,QAAM,qBAAqB,OAAO,CAAC,KAAK;AACxC,QAAM,qBAAqB,OAAO,CAAC,KAAK;AACxC,QAAM,cAAc,eAAe,KAAK;AACxC,QAAM,kBAAkB,eAAe,OAAO,MAAM,WAAW,IAAI,CAAC;AACpE,QAAM,qBAAqB,QAAQ,eAAe,IAC9C,0BACA;AACJ,QAAM,kBAAkB,GAAG,kBAAkB;AAE7C,QAAM,WAAW,QAAQ,qBAAqB,GAAG,GAAG,GAAG,MAAM;AAC7D,QAAM,kBAAkB;AACxB,QAAM,iBAAiB;AACvB,UAAQ,cAAc,UAAU,UAAU,kBAAkB;AAE5D,MAAI,oBAAoB;AACtB,aAAS,aAAa,GAAG,WAAW;AACpC,aAAS,aAAa,GAAG,eAAe;AAAA,EAC1C,WAAW,oBAAoB;AAC7B,aAAS,aAAa,GAAG,eAAe;AACxC,aAAS,aAAa,GAAG,WAAW;AAAA,EACtC,OAAO;AACL,UAAM,QAAQ,YAAY,EAAE,OAAO,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC;AAEvD,UAAM,eAAe,MAAM,CAAC,KAAK;AAEjC,aAAS,aAAa,GAAG,WAAW;AACpC,aAAS,aAAa,cAAc,eAAe;AACnD,aAAS,aAAa,GAAG,WAAW;AAAA,EACtC;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import { color as d3Color } from 'd3-color';\nimport { scaleLinear } from 'd3-scale';\nimport { isEmpty } from 'lodash-es';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { getCanvasColor } from './canvas-color.js';\n\nexport type ShapeBuilderPayload = {\n  context: CanvasRenderingContext2D;\n};\nexport type CanvasGradientGenerator = (props: ShapeBuilderPayload) => void;\n\nexport const DEFAULT_BACKGROUND_DARK = '#000000';\n\ninterface CanvasGradientProps {\n  height: number;\n  color: string;\n  domain: number[];\n  theme: 'light' | 'dark';\n}\n\n/**\n * Given a predefined height, a color and the domain of the data, it creates a linear gradient from top to bottom, bottom to top, or one that goes both directions depending on the domain.\n * @param height - given chart height\n * @param color - given main color of the gradient\n * @param domain - given domain of the chart\n * @param theme - current theme\n * @returns CanvasGradientGenerator\n * @internal\n */\nexport function createCanvasGradient({\n  height,\n  color,\n  domain,\n  theme,\n}: CanvasGradientProps): CanvasGradientGenerator {\n  return ({ context }) => {\n    const gradient = createGradientPattern(\n      context,\n      height,\n      domain,\n      color,\n      theme,\n    );\n\n    fillGradient(context, gradient);\n  };\n}\n\n/**\n * Gives color to the last path drawn in the CanvasContext, and then closes the path.\n * @param context - given canvas context\n * @param color - given color to apply to gradient\n */\nfunction fillGradient(\n  context: CanvasRenderingContext2D,\n  color: CanvasGradient,\n) {\n  context.fillStyle = color;\n\n  context.fill();\n  context.closePath();\n  context.globalAlpha = 0.8;\n  context.save();\n}\n\n/**\n * Converts a resolved CSS color string to a fully transparent `rgba(r,g,b,0)`.\n *\n * d3-color is used because `getComputedStyle` may return any CSS color format (hex, hsl, hsla, etc.).\n * Naively appending `00` only works for hex and produces invalid values like `hsla(240,28%,75%,1)00`.\n *\n * @param color - A resolved CSS color string.\n * @returns A valid `rgba(...)` color string with opacity set to 0, or `rgba(0,0,0,0)` as fallback.\n */\nfunction toTransparentRgba(color: string): string {\n  const parsed = d3Color(color);\n  return parsed !== null\n    ? parsed.copy({ opacity: 0 }).formatRgb()\n    : 'rgba(0,0,0,0)';\n}\n\n/**\n * Creates a linear gradient from color to transparent white.\n *\n * Depending on the given domain, it creates a linear gradient from top to bottom, bottom to top, or one that goes both directions.\n *\n * @param context - given canvas context\n * @param height - given mask height\n * @param domain - given data domain\n * @param color - main color of the gradient\n * @param theme - current Theme\n */\nfunction createGradientPattern(\n  context: CanvasRenderingContext2D,\n  height: number,\n  domain: number[],\n  color: string,\n  theme: 'light' | 'dark',\n): CanvasGradient {\n  const onlyPositiveValues = domain[0] >= 0;\n  const onlyNegativeValues = domain[1] <= 0;\n  const strokeColor = getCanvasColor(color);\n  const backgroundColor = getCanvasColor(Colors.Theme.Background['10']);\n  const backgroundColorRgb = isEmpty(backgroundColor)\n    ? DEFAULT_BACKGROUND_DARK\n    : backgroundColor;\n  const transparentRgba = toTransparentRgba(backgroundColorRgb);\n\n  const gradient = context.createLinearGradient(0, 0, 0, height);\n  const LightThemeAlpha = 0.4;\n  const DarkThemeAlpha = 0.6;\n  context.globalAlpha = theme === 'light' ? LightThemeAlpha : DarkThemeAlpha;\n\n  if (onlyPositiveValues) {\n    gradient.addColorStop(0, strokeColor);\n    gradient.addColorStop(1, transparentRgba);\n  } else if (onlyNegativeValues) {\n    gradient.addColorStop(0, transparentRgba);\n    gradient.addColorStop(1, strokeColor);\n  } else {\n    const scale = scaleLinear().domain(domain).range([1, 0]);\n\n    const zeroLineStop = scale(0) ?? 0.5;\n\n    gradient.addColorStop(0, strokeColor);\n    gradient.addColorStop(zeroLineStop, transparentRgba);\n    gradient.addColorStop(1, strokeColor);\n  }\n\n  return gradient;\n}\n"],
+  "mappings": "AAAA,SAAS,SAAS,eAAe;AACjC,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AAExB,OAAO,YAAY;AAEnB,SAAS,sBAAsB;AAOxB,MAAM,0BAA0B;AAkBhC,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiD;AAC/C,SAAO,CAAC,EAAE,QAAQ,MAAM;AACtB,UAAM,WAAW;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,iBAAa,SAAS,QAAQ;AAAA,EAChC;AACF;AAOA,SAAS,aACP,SACA,OACA;AACA,UAAQ,YAAY;AAEpB,UAAQ,KAAK;AACb,UAAQ,UAAU;AAClB,UAAQ,cAAc;AACtB,UAAQ,KAAK;AACf;AAWA,SAAS,kBAAkB,OAAuB;AAChD,QAAM,SAAS,QAAQ,KAAK;AAC5B,SAAO,WAAW,OACd,OAAO,KAAK,EAAE,SAAS,EAAE,CAAC,EAAE,UAAU,IACtC;AACN;AAaA,SAAS,sBACP,SACA,QACA,QACA,OACA,OACgB;AAChB,QAAM,qBAAqB,OAAO,CAAC,KAAK;AACxC,QAAM,qBAAqB,OAAO,CAAC,KAAK;AACxC,QAAM,cAAc,eAAe,KAAK;AACxC,QAAM,kBAAkB,eAAe,OAAO,MAAM,WAAW,IAAI,CAAC;AACpE,QAAM,qBAAqB,QAAQ,eAAe,IAC9C,0BACA;AACJ,QAAM,kBAAkB,kBAAkB,kBAAkB;AAE5D,QAAM,WAAW,QAAQ,qBAAqB,GAAG,GAAG,GAAG,MAAM;AAC7D,QAAM,kBAAkB;AACxB,QAAM,iBAAiB;AACvB,UAAQ,cAAc,UAAU,UAAU,kBAAkB;AAE5D,MAAI,oBAAoB;AACtB,aAAS,aAAa,GAAG,WAAW;AACpC,aAAS,aAAa,GAAG,eAAe;AAAA,EAC1C,WAAW,oBAAoB;AAC7B,aAAS,aAAa,GAAG,eAAe;AACxC,aAAS,aAAa,GAAG,WAAW;AAAA,EACtC,OAAO;AACL,UAAM,QAAQ,YAAY,EAAE,OAAO,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC;AAEvD,UAAM,eAAe,MAAM,CAAC,KAAK;AAEjC,aAAS,aAAa,GAAG,WAAW;AACpC,aAAS,aAAa,cAAc,eAAe;AACnD,aAAS,aAAa,GAAG,WAAW;AAAA,EACtC;AAEA,SAAO;AACT;",
   "names": []
 }

package/esm/charts/core/components/chart-grid/ChartGrid.css

@@ -1,13 +1,13 @@
-._13lzg4k0-3-0-1 {
+._13lzg4k0-3-1-1 {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
 }
-._13lzg4k1-3-0-1 {
+._13lzg4k1-3-1-1 {
   box-sizing: content-box;
 }
-._13lzg4k2-3-0-1 {
+._13lzg4k2-3-1-1 {
   position: relative;
 }

package/esm/charts/core/components/chart-grid/ChartGrid.sty.js

@@ -1,7 +1,7 @@
 import "./ChartGrid.css";
-var area = "_13lzg4k1-3-0-1";
-var plot = "_13lzg4k2-3-0-1";
-var plotLayout = "_13lzg4k0-3-0-1";
+var area = "_13lzg4k1-3-1-1";
+var plot = "_13lzg4k2-3-1-1";
+var plotLayout = "_13lzg4k0-3-1-1";
 export {
   area,
   plot,

package/esm/charts/core/components/chart-grid/ChartGrid.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/chart-grid/ChartGrid.css.ts"],
-  "sourcesContent": ["import './ChartGrid.css';\nexport var area = '_13lzg4k1-3-0-1';\nexport var plot = '_13lzg4k2-3-0-1';\nexport var plotLayout = '_13lzg4k0-3-0-1';"],
+  "sourcesContent": ["import './ChartGrid.css';\nexport var area = '_13lzg4k1-3-1-1';\nexport var plot = '_13lzg4k2-3-1-1';\nexport var plotLayout = '_13lzg4k0-3-1-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,OAAO;AACX,IAAI,OAAO;AACX,IAAI,aAAa;",
   "names": []
 }

package/esm/charts/core/components/chart-layout/components/styles.css

@@ -1,43 +1,43 @@
-._l1klj80-3-0-1 {
+._l1klj80-3-1-1 {
   min-width: 0;
   grid-area: graphArea;
 }
-._l1klj81-3-0-1 {
+._l1klj81-3-1-1 {
   filter: opacity(40%);
 }
-._l1klj83-3-0-1 {
+._l1klj83-3-1-1 {
   height: inherit;
   grid-area: horizontalResize;
 }
-._l1klj84-3-0-1 {
+._l1klj84-3-1-1 {
   width: 100%;
   grid-area: verticalResize;
 }
-._l1klj85-3-0-1 {
+._l1klj85-3-1-1 {
   filter: opacity(40%);
 }
-._l1klj86-3-0-1 {
+._l1klj86-3-1-1 {
   height: 100%;
 }
-._l1klj87-3-0-1 {
+._l1klj87-3-1-1 {
   grid-area: verticalLegend;
 }
-._l1klj88-3-0-1 {
+._l1klj88-3-1-1 {
   grid-area: horizontalLegend;
 }
-._l1klj89-3-0-1 {
+._l1klj89-3-1-1 {
   filter: opacity(40%);
 }
-._l1klj8a-3-0-1 {
+._l1klj8a-3-1-1 {
   background: var(--dt-colors-border-neutral-default, #dadbe4);
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   border-radius: var(--dt-spacings-size-8, 8px);
   touch-action: none;
 }
-._l1klj8a-3-0-1:hover {
+._l1klj8a-3-1-1:hover {
   background: var(--dt-colors-border-primary-accent, #464cce);
 }
-._l1klj8b-3-0-1 {
+._l1klj8b-3-1-1 {
   transition: height var(--dt-timings-base-default, 300ms) var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
   height: 36px;
   width: 2px;
@@ -46,11 +46,11 @@
   grid-area: horizontalResize;
   align-self: center;
 }
-._l1klj8b-3-0-1:hover {
+._l1klj8b-3-1-1:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._l1klj8c-3-0-1 {
+._l1klj8c-3-1-1 {
   transition: width var(--dt-timings-base-default, 300ms) var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
   height: 2px;
   width: 36px;
@@ -59,7 +59,7 @@
   grid-area: verticalResize;
   align-self: flex-end;
 }
-._l1klj8c-3-0-1:hover {
+._l1klj8c-3-1-1:hover {
   width: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }

package/esm/charts/core/components/chart-layout/components/styles.sty.js

@@ -1,9 +1,9 @@
 import "./styles.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var graphContainer = _7a468({ defaultClassName: "_l1klj80-3-0-1", variantClassNames: { loading: { true: "_l1klj81-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
-var legendContainer = _7a468({ defaultClassName: "_l1klj86-3-0-1", variantClassNames: { orientation: { horizontal: "_l1klj87-3-0-1", vertical: "_l1klj88-3-0-1" }, loading: { true: "_l1klj89-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
-var legendResizeLine = _7a468({ defaultClassName: "_l1klj8a-3-0-1", variantClassNames: { orientation: { horizontal: "_l1klj8b-3-0-1", vertical: "_l1klj8c-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
-var resizeContainer = _7a468({ defaultClassName: "_l1klj82-3-0-1", variantClassNames: { orientation: { horizontal: "_l1klj83-3-0-1", vertical: "_l1klj84-3-0-1" }, loading: { true: "_l1klj85-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
+var graphContainer = _7a468({ defaultClassName: "_l1klj80-3-1-1", variantClassNames: { loading: { true: "_l1klj81-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
+var legendContainer = _7a468({ defaultClassName: "_l1klj86-3-1-1", variantClassNames: { orientation: { horizontal: "_l1klj87-3-1-1", vertical: "_l1klj88-3-1-1" }, loading: { true: "_l1klj89-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
+var legendResizeLine = _7a468({ defaultClassName: "_l1klj8a-3-1-1", variantClassNames: { orientation: { horizontal: "_l1klj8b-3-1-1", vertical: "_l1klj8c-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
+var resizeContainer = _7a468({ defaultClassName: "_l1klj82-3-1-1", variantClassNames: { orientation: { horizontal: "_l1klj83-3-1-1", vertical: "_l1klj84-3-1-1" }, loading: { true: "_l1klj85-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   graphContainer,
   legendContainer,

package/esm/charts/core/components/chart-layout/components/styles.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/chart-layout/components/styles.css.ts"],
-  "sourcesContent": ["import './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var graphContainer = _7a468({defaultClassName:'_l1klj80-3-0-1',variantClassNames:{loading:{true:'_l1klj81-3-0-1'}},defaultVariants:{},compoundVariants:[]});\nexport var legendContainer = _7a468({defaultClassName:'_l1klj86-3-0-1',variantClassNames:{orientation:{horizontal:'_l1klj87-3-0-1',vertical:'_l1klj88-3-0-1'},loading:{true:'_l1klj89-3-0-1'}},defaultVariants:{},compoundVariants:[]});\nexport var legendResizeLine = _7a468({defaultClassName:'_l1klj8a-3-0-1',variantClassNames:{orientation:{horizontal:'_l1klj8b-3-0-1',vertical:'_l1klj8c-3-0-1'}},defaultVariants:{},compoundVariants:[]});\nexport var resizeContainer = _7a468({defaultClassName:'_l1klj82-3-0-1',variantClassNames:{orientation:{horizontal:'_l1klj83-3-0-1',vertical:'_l1klj84-3-0-1'},loading:{true:'_l1klj85-3-0-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var graphContainer = _7a468({defaultClassName:'_l1klj80-3-1-1',variantClassNames:{loading:{true:'_l1klj81-3-1-1'}},defaultVariants:{},compoundVariants:[]});\nexport var legendContainer = _7a468({defaultClassName:'_l1klj86-3-1-1',variantClassNames:{orientation:{horizontal:'_l1klj87-3-1-1',vertical:'_l1klj88-3-1-1'},loading:{true:'_l1klj89-3-1-1'}},defaultVariants:{},compoundVariants:[]});\nexport var legendResizeLine = _7a468({defaultClassName:'_l1klj8a-3-1-1',variantClassNames:{orientation:{horizontal:'_l1klj8b-3-1-1',vertical:'_l1klj8c-3-1-1'}},defaultVariants:{},compoundVariants:[]});\nexport var resizeContainer = _7a468({defaultClassName:'_l1klj82-3-1-1',variantClassNames:{orientation:{horizontal:'_l1klj83-3-1-1',vertical:'_l1klj84-3-1-1'},loading:{true:'_l1klj85-3-1-1'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,SAAQ,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC1J,IAAI,kBAAkB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,aAAY,EAAC,YAAW,kBAAiB,UAAS,iBAAgB,GAAE,SAAQ,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC/N,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,aAAY,EAAC,YAAW,kBAAiB,UAAS,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAChM,IAAI,kBAAkB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,aAAY,EAAC,YAAW,kBAAiB,UAAS,iBAAgB,GAAE,SAAQ,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/core/components/chart-states/ChartState.css

@@ -1,16 +1,16 @@
-._4pqs4v0-3-0-1 {
+._4pqs4v0-3-1-1 {
   color: var(--dt-colors-text-critical-default, #bb0731);
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._4pqs4v1-3-0-1 {
+._4pqs4v1-3-1-1 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._4pqs4v2-3-0-1 {
+._4pqs4v2-3-1-1 {
   align-items: center;
   justify-content: center;
 }
-._4pqs4v3-3-0-1 {
+._4pqs4v3-3-1-1 {
   position: relative;
   width: 100%;
 }

package/esm/charts/core/components/chart-states/ChartState.sty.js

@@ -1,8 +1,8 @@
 import "./ChartState.css";
-var container = "_4pqs4v3-3-0-1";
-var emptyText = "_4pqs4v1-3-0-1";
-var errorText = "_4pqs4v0-3-0-1";
-var wrapper = "_4pqs4v2-3-0-1";
+var container = "_4pqs4v3-3-1-1";
+var emptyText = "_4pqs4v1-3-1-1";
+var errorText = "_4pqs4v0-3-1-1";
+var wrapper = "_4pqs4v2-3-1-1";
 export {
   container,
   emptyText,

package/esm/charts/core/components/chart-states/ChartState.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/chart-states/ChartState.css.ts"],
-  "sourcesContent": ["import './ChartState.css';\nexport var container = '_4pqs4v3-3-0-1';\nexport var emptyText = '_4pqs4v1-3-0-1';\nexport var errorText = '_4pqs4v0-3-0-1';\nexport var wrapper = '_4pqs4v2-3-0-1';"],
+  "sourcesContent": ["import './ChartState.css';\nexport var container = '_4pqs4v3-3-1-1';\nexport var emptyText = '_4pqs4v1-3-1-1';\nexport var errorText = '_4pqs4v0-3-1-1';\nexport var wrapper = '_4pqs4v2-3-1-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;AAChB,IAAI,YAAY;AAChB,IAAI,YAAY;AAChB,IAAI,UAAU;",
   "names": []
 }

package/esm/charts/core/components/chart-states/ChartStateHandler.js

@@ -4,6 +4,7 @@ import { ErrorBoundary } from "react-error-boundary";
 import { container } from "./ChartState.sty.js";
 import { EmptyState } from "./EmptyState.js";
 import { ErrorState } from "./ErrorState.js";
+import { useBehavioralTrackingProps } from "../../../../core/hooks/useBehavioralTrackingProps.js";
 import { LoaderOverlay } from "../loader-overlay/LoaderOverlay.js";
 const getContent = (props) => {
   const { empty, height, emptyState, errorState, children, isLoading } = props;
@@ -38,9 +39,11 @@ function ChartStateHandler(props) {
     ...rest
   } = props;
   const content = getContent(props);
+  const [behavioralTrackingProps, otherProps] = useBehavioralTrackingProps(rest);
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ...behavioralTrackingProps,
       className: clsx(container, className),
       style: {
         height,
@@ -49,7 +52,7 @@ function ChartStateHandler(props) {
       },
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
-      ...rest,
+      ...otherProps,
       children: content
     }
   );

package/esm/charts/core/components/chart-states/ChartStateHandler.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/chart-states/ChartStateHandler.tsx"],
-  "sourcesContent": ["import { clsx } from 'clsx';\nimport {\n  type CSSProperties,\n  type PropsWithChildren,\n  type JSX,\n  type ReactNode,\n} from 'react';\nimport { ErrorBoundary } from 'react-error-boundary';\n\n\nimport { container } from './ChartState.sty.js';\nimport { EmptyState } from './EmptyState.js';\nimport { ErrorState } from './ErrorState.js';\nimport type { MaskingProps } from '../../../../core/types/masking-props.js';\nimport { LoaderOverlay } from '../loader-overlay/LoaderOverlay.js';\n\ninterface ChartStateHandlerProps extends MaskingProps {\n  empty: boolean;\n  height: string | number;\n  emptyState: ReactNode | undefined;\n  errorState: ReactNode | ((message: string) => JSX.Element) | undefined;\n  isLoading: boolean;\n  style?: CSSProperties;\n  className?: string;\n}\n\nconst getContent = (props: PropsWithChildren<ChartStateHandlerProps>) => {\n  const { empty, height, emptyState, errorState, children, isLoading } = props;\n\n  if (empty) {\n    return isLoading ? (\n      <LoaderOverlay />\n    ) : (\n      <EmptyState height={height}>{emptyState}</EmptyState>\n    );\n  }\n\n  return (\n    <ErrorBoundary\n      FallbackComponent={ErrorState({\n        height: height,\n        children: errorState,\n      })}\n    >\n      {children}\n      {isLoading && <LoaderOverlay />}\n    </ErrorBoundary>\n  );\n};\n\nexport function ChartStateHandler(\n  props: PropsWithChildren<ChartStateHandlerProps>,\n) {\n  const {\n    height,\n    empty,\n    emptyState,\n    errorState,\n    isLoading,\n    style,\n    className,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...rest\n  } = props;\n  const content = getContent(props);\n\n  return (\n    <div\n      className={clsx(container, className)}\n      style={{\n        height,\n        filter: isLoading ? 'opacity(85%)' : 'none',\n        ...style,\n      }}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      {...rest}\n    >\n      {content}\n    </div>\n  );\n}\n"],
-  "mappings": "AA+BM,cAOF,YAPE;AA/BN,SAAS,YAAY;AAOrB,SAAS,qBAAqB;AAG9B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAE3B,SAAS,qBAAqB;AAY9B,MAAM,aAAa,CAAC,UAAqD;AACvE,QAAM,EAAE,OAAO,QAAQ,YAAY,YAAY,UAAU,UAAU,IAAI;AAEvE,MAAI,OAAO;AACT,WAAO,YACL,oBAAC,iBAAc,IAEf,oBAAC,cAAW,QAAiB,sBAAW;AAAA,EAE5C;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,mBAAmB,WAAW;AAAA,QAC5B;AAAA,QACA,UAAU;AAAA,MACZ,CAAC;AAAA,MAEA;AAAA;AAAA,QACA,aAAa,oBAAC,iBAAc;AAAA;AAAA;AAAA,EAC/B;AAEJ;AAEO,SAAS,kBACd,OACA;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,UAAU,WAAW,KAAK;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK,WAAW,SAAS;AAAA,MACpC,OAAO;AAAA,QACL;AAAA,QACA,QAAQ,YAAY,iBAAiB;AAAA,QACrC,GAAG;AAAA,MACL;AAAA,MACA,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MACjB,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;",
+  "sourcesContent": ["import { clsx } from 'clsx';\nimport {\n  type CSSProperties,\n  type PropsWithChildren,\n  type JSX,\n  type ReactNode,\n} from 'react';\nimport { ErrorBoundary } from 'react-error-boundary';\n\nimport { container } from './ChartState.sty.js';\nimport { EmptyState } from './EmptyState.js';\nimport { ErrorState } from './ErrorState.js';\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';\nimport type { MaskingProps } from '../../../../core/types/masking-props.js';\nimport { LoaderOverlay } from '../loader-overlay/LoaderOverlay.js';\n\ninterface ChartStateHandlerProps extends MaskingProps, BehaviorTrackingProps {\n  empty: boolean;\n  height: string | number;\n  emptyState: ReactNode | undefined;\n  errorState: ReactNode | ((message: string) => JSX.Element) | undefined;\n  isLoading: boolean;\n  style?: CSSProperties;\n  className?: string;\n}\n\nconst getContent = (props: PropsWithChildren<ChartStateHandlerProps>) => {\n  const { empty, height, emptyState, errorState, children, isLoading } = props;\n\n  if (empty) {\n    return isLoading ? (\n      <LoaderOverlay />\n    ) : (\n      <EmptyState height={height}>{emptyState}</EmptyState>\n    );\n  }\n\n  return (\n    <ErrorBoundary\n      FallbackComponent={ErrorState({\n        height: height,\n        children: errorState,\n      })}\n    >\n      {children}\n      {isLoading && <LoaderOverlay />}\n    </ErrorBoundary>\n  );\n};\n\nexport function ChartStateHandler(\n  props: PropsWithChildren<ChartStateHandlerProps>,\n) {\n  const {\n    height,\n    empty,\n    emptyState,\n    errorState,\n    isLoading,\n    style,\n    className,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...rest\n  } = props;\n  const content = getContent(props);\n  const [behavioralTrackingProps, otherProps] =\n    useBehavioralTrackingProps(rest);\n\n  return (\n    <div\n      {...behavioralTrackingProps}\n      className={clsx(container, className)}\n      style={{\n        height,\n        filter: isLoading ? 'opacity(85%)' : 'none',\n        ...style,\n      }}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      {...otherProps}\n    >\n      {content}\n    </div>\n  );\n}\n"],
+  "mappings": "AAgCM,cAOF,YAPE;AAhCN,SAAS,YAAY;AAOrB,SAAS,qBAAqB;AAE9B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,kCAAkC;AAG3C,SAAS,qBAAqB;AAY9B,MAAM,aAAa,CAAC,UAAqD;AACvE,QAAM,EAAE,OAAO,QAAQ,YAAY,YAAY,UAAU,UAAU,IAAI;AAEvE,MAAI,OAAO;AACT,WAAO,YACL,oBAAC,iBAAc,IAEf,oBAAC,cAAW,QAAiB,sBAAW;AAAA,EAE5C;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,mBAAmB,WAAW;AAAA,QAC5B;AAAA,QACA,UAAU;AAAA,MACZ,CAAC;AAAA,MAEA;AAAA;AAAA,QACA,aAAa,oBAAC,iBAAc;AAAA;AAAA;AAAA,EAC/B;AAEJ;AAEO,SAAS,kBACd,OACA;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,UAAU,WAAW,KAAK;AAChC,QAAM,CAAC,yBAAyB,UAAU,IACxC,2BAA2B,IAAI;AAEjC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,KAAK,WAAW,SAAS;AAAA,MACpC,OAAO;AAAA,QACL;AAAA,QACA,QAAQ,YAAY,iBAAiB;AAAA,QACrC,GAAG;AAAA,MACL;AAAA,MACA,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MACjB,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;",
   "names": []
 }

package/esm/charts/core/components/crosshair/components/Magnifier.css

@@ -1,4 +1,4 @@
-._nm3s3e0-3-0-1 {
+._nm3s3e0-3-1-1 {
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);
   font-weight: var(--dt-typography-text-small-default-weight, 400);
@@ -13,24 +13,24 @@
   z-index: var(--dt-elevations-sticky, 10);
   padding: var(--dt-spacings-size-2, 2px) var(--dt-spacings-size-4, 4px);
 }
-._nm3s3e1-3-0-1 {
+._nm3s3e1-3-1-1 {
   margin-left: -2px;
 }
-._nm3s3e2-3-0-1 {
+._nm3s3e2-3-1-1 {
   margin-left: var(--dt-spacings-size-2, 2px);
 }
-._nm3s3e3-3-0-1 {
+._nm3s3e3-3-1-1 {
   margin-top: var(--dt-spacings-size-2, 2px);
 }
-._nm3s3e4-3-0-1 {
+._nm3s3e4-3-1-1 {
   margin-top: -2px;
 }
-._nm3s3e5-3-0-1 {
+._nm3s3e5-3-1-1 {
   transform: rotate(-90deg);
   transform-origin: left bottom;
   margin-top: -2px;
 }
-._nm3s3e6-3-0-1 {
+._nm3s3e6-3-1-1 {
   transform: rotate(90deg) scaleX(-1) scaleY(-1) translateX(-100%) translateY(-100%);
   transform-origin: left top;
   margin-top: var(--dt-spacings-size-2, 2px);

package/esm/charts/core/components/crosshair/components/Magnifier.sty.js

@@ -1,12 +1,12 @@
 import "./Magnifier.css";
-var bottom = "_nm3s3e3-3-0-1";
-var left = "_nm3s3e1-3-0-1";
-var magnifier = "_nm3s3e0-3-0-1";
+var bottom = "_nm3s3e3-3-1-1";
+var left = "_nm3s3e1-3-1-1";
+var magnifier = "_nm3s3e0-3-1-1";
 var magnifierFontStyles = { fontFamily: "var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif)", fontSize: "var(--dt-typography-text-small-default-size, 12px)", fontWeight: "var(--dt-typography-text-small-default-weight, 400)", lineHeight: "var(--dt-typography-text-small-default-line-height, 1.333333333)" };
-var right = "_nm3s3e2-3-0-1";
-var rotatedBottomStyle = "_nm3s3e6-3-0-1";
-var rotatedTopStyle = "_nm3s3e5-3-0-1";
-var top = "_nm3s3e4-3-0-1";
+var right = "_nm3s3e2-3-1-1";
+var rotatedBottomStyle = "_nm3s3e6-3-1-1";
+var rotatedTopStyle = "_nm3s3e5-3-1-1";
+var top = "_nm3s3e4-3-1-1";
 export {
   bottom,
   left,

package/esm/charts/core/components/crosshair/components/Magnifier.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/crosshair/components/Magnifier.css.ts"],
-  "sourcesContent": ["import './Magnifier.css';\nexport var bottom = '_nm3s3e3-3-0-1';\nexport var left = '_nm3s3e1-3-0-1';\nexport var magnifier = '_nm3s3e0-3-0-1';\nexport var magnifierFontStyles = {fontFamily:'var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif)',fontSize:'var(--dt-typography-text-small-default-size, 12px)',fontWeight:'var(--dt-typography-text-small-default-weight, 400)',lineHeight:'var(--dt-typography-text-small-default-line-height, 1.333333333)'};\nexport var right = '_nm3s3e2-3-0-1';\nexport var rotatedBottomStyle = '_nm3s3e6-3-0-1';\nexport var rotatedTopStyle = '_nm3s3e5-3-0-1';\nexport var top = '_nm3s3e4-3-0-1';"],
+  "sourcesContent": ["import './Magnifier.css';\nexport var bottom = '_nm3s3e3-3-1-1';\nexport var left = '_nm3s3e1-3-1-1';\nexport var magnifier = '_nm3s3e0-3-1-1';\nexport var magnifierFontStyles = {fontFamily:'var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif)',fontSize:'var(--dt-typography-text-small-default-size, 12px)',fontWeight:'var(--dt-typography-text-small-default-weight, 400)',lineHeight:'var(--dt-typography-text-small-default-line-height, 1.333333333)'};\nexport var right = '_nm3s3e2-3-1-1';\nexport var rotatedBottomStyle = '_nm3s3e6-3-1-1';\nexport var rotatedTopStyle = '_nm3s3e5-3-1-1';\nexport var top = '_nm3s3e4-3-1-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;AACb,IAAI,OAAO;AACX,IAAI,YAAY;AAChB,IAAI,sBAAsB,EAAC,YAAW,6FAA4F,UAAS,sDAAqD,YAAW,uDAAsD,YAAW,mEAAkE;AAC9U,IAAI,QAAQ;AACZ,IAAI,qBAAqB;AACzB,IAAI,kBAAkB;AACtB,IAAI,MAAM;",
   "names": []
 }

package/esm/charts/core/components/crosshair/utils/get-magnifier-label.js

@@ -1,8 +1,23 @@
 import { isBandScale } from "../../../utils/detect-scale.js";
 import { scaleBandInvert } from "../../../utils/scale.js";
+const DEFAULT_MAGNIFIER_PRECISION = 0;
 function isDuration(args) {
   return args.unit === "duration";
 }
+function getMagnifierPrecision(scale) {
+  const [minDomain, maxDomain] = scale.domain();
+  const [minRange, maxRange] = scale.range();
+  const domainSpan = Math.abs(Number(maxDomain) - Number(minDomain));
+  const rangeSpan = Math.abs(Number(maxRange) - Number(minRange));
+  if (domainSpan === 0 || rangeSpan === 0 || !isFinite(domainSpan) || !isFinite(rangeSpan)) {
+    return DEFAULT_MAGNIFIER_PRECISION;
+  }
+  const valuePerPixel = domainSpan / rangeSpan;
+  return Math.max(
+    DEFAULT_MAGNIFIER_PRECISION,
+    Math.ceil(-Math.log10(valuePerPixel))
+  );
+}
 function getMagnifierLabel(unit, coordinate, formatter, mousePosition, scale) {
   if (!mousePosition || !scale) {
     return;
@@ -14,6 +29,10 @@ function getMagnifierLabel(unit, coordinate, formatter, mousePosition, scale) {
   const measurement = { unit, value };
   if (isDuration(measurement)) {
     value = Math.round(measurement.value);
+  } else if (typeof value === "number") {
+    const precision = getMagnifierPrecision(scale);
+    const factor = Math.pow(10, precision);
+    value = Math.round(value * factor) / factor;
   }
   return formatter(value, unit);
 }

package/esm/charts/core/components/crosshair/utils/get-magnifier-label.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/crosshair/utils/get-magnifier-label.ts"],
-  "sourcesContent": ["import type { ChartUnit } from '../../../types/chart-unit.js';\nimport { Formatter, TimeFormatter } from '../../../types/formatter.js';\nimport type { Point } from '../../../types/point.js';\nimport { AnyScale } from '../../../types/scales.js';\nimport { isBandScale } from '../../../utils/detect-scale.js';\nimport { scaleBandInvert } from '../../../utils/scale.js';\n\nexport type MagnifierFormatter = Formatter | TimeFormatter;\n\nfunction isDuration(args: {\n  unit: ChartUnit;\n  value: Date | number;\n}): args is { unit: 'duration'; value: number } {\n  return args.unit === 'duration';\n}\n\nexport function getMagnifierLabel(\n  unit: ChartUnit,\n  coordinate: 'y' | 'x',\n  formatter: MagnifierFormatter,\n  mousePosition?: Point,\n  scale?: AnyScale,\n): string | undefined {\n  if (!mousePosition || !scale) {\n    return;\n  }\n\n  if (isBandScale(scale)) {\n    return scaleBandInvert(scale)(mousePosition[coordinate]);\n  }\n\n  let value = scale.invert(mousePosition[coordinate]);\n\n  const measurement = { unit, value };\n  if (isDuration(measurement)) {\n    value = Math.round(measurement.value);\n  }\n\n  return formatter(value as number & Date, unit);\n}\n"],
-  "mappings": "AAIA,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAIhC,SAAS,WAAW,MAG4B;AAC9C,SAAO,KAAK,SAAS;AACvB;AAEO,SAAS,kBACd,MACA,YACA,WACA,eACA,OACoB;AACpB,MAAI,CAAC,iBAAiB,CAAC,OAAO;AAC5B;AAAA,EACF;AAEA,MAAI,YAAY,KAAK,GAAG;AACtB,WAAO,gBAAgB,KAAK,EAAE,cAAc,UAAU,CAAC;AAAA,EACzD;AAEA,MAAI,QAAQ,MAAM,OAAO,cAAc,UAAU,CAAC;AAElD,QAAM,cAAc,EAAE,MAAM,MAAM;AAClC,MAAI,WAAW,WAAW,GAAG;AAC3B,YAAQ,KAAK,MAAM,YAAY,KAAK;AAAA,EACtC;AAEA,SAAO,UAAU,OAAwB,IAAI;AAC/C;",
+  "sourcesContent": ["import type { ChartUnit } from '../../../types/chart-unit.js';\nimport { Formatter, TimeFormatter } from '../../../types/formatter.js';\nimport type { Point } from '../../../types/point.js';\nimport { AnyScale } from '../../../types/scales.js';\nimport { isBandScale } from '../../../utils/detect-scale.js';\nimport { scaleBandInvert } from '../../../utils/scale.js';\n\nexport type MagnifierFormatter = Formatter | TimeFormatter;\n\nconst DEFAULT_MAGNIFIER_PRECISION = 0;\n\nfunction isDuration(args: {\n  unit: ChartUnit;\n  value: Date | number;\n}): args is { unit: 'duration'; value: number } {\n  return args.unit === 'duration';\n}\n\nfunction getMagnifierPrecision(scale: AnyScale): number {\n  const [minDomain, maxDomain] = scale.domain();\n  const [minRange, maxRange] = scale.range();\n\n  const domainSpan = Math.abs(Number(maxDomain) - Number(minDomain));\n  const rangeSpan = Math.abs(Number(maxRange) - Number(minRange));\n\n  if (\n    domainSpan === 0 ||\n    rangeSpan === 0 ||\n    !isFinite(domainSpan) ||\n    !isFinite(rangeSpan)\n  ) {\n    return DEFAULT_MAGNIFIER_PRECISION;\n  }\n\n  const valuePerPixel = domainSpan / rangeSpan;\n\n  // Calculates decimal precision based on valuePerPixel: how many data units each pixel represents.\n  // Adapts precision so that displayed values reflect the actual data resolution visible on screen.\n  return Math.max(\n    DEFAULT_MAGNIFIER_PRECISION,\n    Math.ceil(-Math.log10(valuePerPixel)),\n  );\n}\n\nexport function getMagnifierLabel(\n  unit: ChartUnit,\n  coordinate: 'y' | 'x',\n  formatter: MagnifierFormatter,\n  mousePosition?: Point,\n  scale?: AnyScale,\n): string | undefined {\n  if (!mousePosition || !scale) {\n    return;\n  }\n\n  if (isBandScale(scale)) {\n    return scaleBandInvert(scale)(mousePosition[coordinate]);\n  }\n\n  let value = scale.invert(mousePosition[coordinate]);\n\n  const measurement = { unit, value };\n  if (isDuration(measurement)) {\n    value = Math.round(measurement.value);\n  } else if (typeof value === 'number') {\n    const precision = getMagnifierPrecision(scale);\n    const factor = Math.pow(10, precision);\n    value = Math.round(value * factor) / factor;\n  }\n\n  return formatter(value as number & Date, unit);\n}\n"],
+  "mappings": "AAIA,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAIhC,MAAM,8BAA8B;AAEpC,SAAS,WAAW,MAG4B;AAC9C,SAAO,KAAK,SAAS;AACvB;AAEA,SAAS,sBAAsB,OAAyB;AACtD,QAAM,CAAC,WAAW,SAAS,IAAI,MAAM,OAAO;AAC5C,QAAM,CAAC,UAAU,QAAQ,IAAI,MAAM,MAAM;AAEzC,QAAM,aAAa,KAAK,IAAI,OAAO,SAAS,IAAI,OAAO,SAAS,CAAC;AACjE,QAAM,YAAY,KAAK,IAAI,OAAO,QAAQ,IAAI,OAAO,QAAQ,CAAC;AAE9D,MACE,eAAe,KACf,cAAc,KACd,CAAC,SAAS,UAAU,KACpB,CAAC,SAAS,SAAS,GACnB;AACA,WAAO;AAAA,EACT;AAEA,QAAM,gBAAgB,aAAa;AAInC,SAAO,KAAK;AAAA,IACV;AAAA,IACA,KAAK,KAAK,CAAC,KAAK,MAAM,aAAa,CAAC;AAAA,EACtC;AACF;AAEO,SAAS,kBACd,MACA,YACA,WACA,eACA,OACoB;AACpB,MAAI,CAAC,iBAAiB,CAAC,OAAO;AAC5B;AAAA,EACF;AAEA,MAAI,YAAY,KAAK,GAAG;AACtB,WAAO,gBAAgB,KAAK,EAAE,cAAc,UAAU,CAAC;AAAA,EACzD;AAEA,MAAI,QAAQ,MAAM,OAAO,cAAc,UAAU,CAAC;AAElD,QAAM,cAAc,EAAE,MAAM,MAAM;AAClC,MAAI,WAAW,WAAW,GAAG;AAC3B,YAAQ,KAAK,MAAM,YAAY,KAAK;AAAA,EACtC,WAAW,OAAO,UAAU,UAAU;AACpC,UAAM,YAAY,sBAAsB,KAAK;AAC7C,UAAM,SAAS,KAAK,IAAI,IAAI,SAAS;AACrC,YAAQ,KAAK,MAAM,QAAQ,MAAM,IAAI;AAAA,EACvC;AAEA,SAAO,UAAU,OAAwB,IAAI;AAC/C;",
   "names": []
 }

package/esm/charts/core/components/interactions-overlay/InteractionsOverlay.css

@@ -1,4 +1,4 @@
-._nfahiq0-3-0-1 {
+._nfahiq0-3-1-1 {
   position: absolute;
   width: 100%;
   height: 100%;
@@ -6,15 +6,15 @@
   left: 0;
   touch-action: none;
 }
-._nfahiq1-3-0-1 {
+._nfahiq1-3-1-1 {
   cursor: crosshair;
 }
-._nfahiq2-3-0-1 {
+._nfahiq2-3-1-1 {
   cursor: ew-resize;
 }
-._nfahiq3-3-0-1 {
+._nfahiq3-3-1-1 {
   cursor: zoom-in;
 }
-._nfahiq4-3-0-1 {
+._nfahiq4-3-1-1 {
   cursor: zoom-out;
 }

package/esm/charts/core/components/interactions-overlay/InteractionsOverlay.sty.js

@@ -1,7 +1,7 @@
 import "./InteractionsOverlay.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var chartEventsWrapper = _7a468({ defaultClassName: "_nfahiq0-3-0-1", variantClassNames: { mode: { explore: "_nfahiq1-3-0-1", pan: "_nfahiq2-3-0-1", zoom: "_nfahiq3-3-0-1", zoomOut: "_nfahiq4-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
-var interactionsOverlay = "_nfahiq5-3-0-1";
+var chartEventsWrapper = _7a468({ defaultClassName: "_nfahiq0-3-1-1", variantClassNames: { mode: { explore: "_nfahiq1-3-1-1", pan: "_nfahiq2-3-1-1", zoom: "_nfahiq3-3-1-1", zoomOut: "_nfahiq4-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
+var interactionsOverlay = "_nfahiq5-3-1-1";
 export {
   chartEventsWrapper,
   interactionsOverlay

package/esm/charts/core/components/interactions-overlay/InteractionsOverlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/interactions-overlay/InteractionsOverlay.css.ts"],
-  "sourcesContent": ["import './InteractionsOverlay.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var chartEventsWrapper = _7a468({defaultClassName:'_nfahiq0-3-0-1',variantClassNames:{mode:{explore:'_nfahiq1-3-0-1',pan:'_nfahiq2-3-0-1',zoom:'_nfahiq3-3-0-1',zoomOut:'_nfahiq4-3-0-1'}},defaultVariants:{},compoundVariants:[]});\nexport var interactionsOverlay = '_nfahiq5-3-0-1';"],
+  "sourcesContent": ["import './InteractionsOverlay.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var chartEventsWrapper = _7a468({defaultClassName:'_nfahiq0-3-1-1',variantClassNames:{mode:{explore:'_nfahiq1-3-1-1',pan:'_nfahiq2-3-1-1',zoom:'_nfahiq3-3-1-1',zoomOut:'_nfahiq4-3-1-1'}},defaultVariants:{},compoundVariants:[]});\nexport var interactionsOverlay = '_nfahiq5-3-1-1';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,qBAAqB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,MAAK,EAAC,SAAQ,kBAAiB,KAAI,kBAAiB,MAAK,kBAAiB,SAAQ,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAClO,IAAI,sBAAsB;",
   "names": []
 }