@dynatrace/strato-components 3.4.0 → 3.5.0

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

@@ -1,46 +1,46 @@
-._l1klj80-3-4-0 {
+._l1klj80-3-5-0 {
   min-width: 0;
   grid-area: graphArea;
 }
-._l1klj81-3-4-0 {
+._l1klj81-3-5-0 {
   filter: opacity(40%);
   pointer-events: none;
 }
-._l1klj83-3-4-0 {
+._l1klj83-3-5-0 {
   height: inherit;
   grid-area: horizontalResize;
 }
-._l1klj84-3-4-0 {
+._l1klj84-3-5-0 {
   width: 100%;
   grid-area: verticalResize;
 }
-._l1klj85-3-4-0 {
+._l1klj85-3-5-0 {
   filter: opacity(40%);
   pointer-events: none;
 }
-._l1klj86-3-4-0 {
+._l1klj86-3-5-0 {
   height: 100%;
 }
-._l1klj87-3-4-0 {
+._l1klj87-3-5-0 {
   grid-area: verticalLegend;
 }
-._l1klj88-3-4-0 {
+._l1klj88-3-5-0 {
   grid-area: horizontalLegend;
 }
-._l1klj89-3-4-0 {
+._l1klj89-3-5-0 {
   filter: opacity(40%);
   pointer-events: none;
 }
-._l1klj8a-3-4-0 {
+._l1klj8a-3-5-0 {
   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-4-0:hover {
+._l1klj8a-3-5-0:hover {
   background: var(--dt-colors-border-primary-accent, #464cce);
 }
-._l1klj8b-3-4-0 {
+._l1klj8b-3-5-0 {
   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;
@@ -49,11 +49,11 @@
   grid-area: horizontalResize;
   align-self: center;
 }
-._l1klj8b-3-4-0:hover {
+._l1klj8b-3-5-0:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._l1klj8c-3-4-0 {
+._l1klj8c-3-5-0 {
   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;
@@ -62,7 +62,7 @@
   grid-area: verticalResize;
   align-self: flex-end;
 }
-._l1klj8c-3-4-0:hover {
+._l1klj8c-3-5-0: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-4-0", variantClassNames: { loading: { true: "_l1klj81-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
-var legendContainer = _7a468({ defaultClassName: "_l1klj86-3-4-0", variantClassNames: { orientation: { horizontal: "_l1klj87-3-4-0", vertical: "_l1klj88-3-4-0" }, loading: { true: "_l1klj89-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
-var legendResizeLine = _7a468({ defaultClassName: "_l1klj8a-3-4-0", variantClassNames: { orientation: { horizontal: "_l1klj8b-3-4-0", vertical: "_l1klj8c-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
-var resizeContainer = _7a468({ defaultClassName: "_l1klj82-3-4-0", variantClassNames: { orientation: { horizontal: "_l1klj83-3-4-0", vertical: "_l1klj84-3-4-0" }, loading: { true: "_l1klj85-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
+var graphContainer = _7a468({ defaultClassName: "_l1klj80-3-5-0", variantClassNames: { loading: { true: "_l1klj81-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
+var legendContainer = _7a468({ defaultClassName: "_l1klj86-3-5-0", variantClassNames: { orientation: { horizontal: "_l1klj87-3-5-0", vertical: "_l1klj88-3-5-0" }, loading: { true: "_l1klj89-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
+var legendResizeLine = _7a468({ defaultClassName: "_l1klj8a-3-5-0", variantClassNames: { orientation: { horizontal: "_l1klj8b-3-5-0", vertical: "_l1klj8c-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
+var resizeContainer = _7a468({ defaultClassName: "_l1klj82-3-5-0", variantClassNames: { orientation: { horizontal: "_l1klj83-3-5-0", vertical: "_l1klj84-3-5-0" }, loading: { true: "_l1klj85-3-5-0" } }, 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-4-0',variantClassNames:{loading:{true:'_l1klj81-3-4-0'}},defaultVariants:{},compoundVariants:[]});\nexport var legendContainer = _7a468({defaultClassName:'_l1klj86-3-4-0',variantClassNames:{orientation:{horizontal:'_l1klj87-3-4-0',vertical:'_l1klj88-3-4-0'},loading:{true:'_l1klj89-3-4-0'}},defaultVariants:{},compoundVariants:[]});\nexport var legendResizeLine = _7a468({defaultClassName:'_l1klj8a-3-4-0',variantClassNames:{orientation:{horizontal:'_l1klj8b-3-4-0',vertical:'_l1klj8c-3-4-0'}},defaultVariants:{},compoundVariants:[]});\nexport var resizeContainer = _7a468({defaultClassName:'_l1klj82-3-4-0',variantClassNames:{orientation:{horizontal:'_l1klj83-3-4-0',vertical:'_l1klj84-3-4-0'},loading:{true:'_l1klj85-3-4-0'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var graphContainer = _7a468({defaultClassName:'_l1klj80-3-5-0',variantClassNames:{loading:{true:'_l1klj81-3-5-0'}},defaultVariants:{},compoundVariants:[]});\nexport var legendContainer = _7a468({defaultClassName:'_l1klj86-3-5-0',variantClassNames:{orientation:{horizontal:'_l1klj87-3-5-0',vertical:'_l1klj88-3-5-0'},loading:{true:'_l1klj89-3-5-0'}},defaultVariants:{},compoundVariants:[]});\nexport var legendResizeLine = _7a468({defaultClassName:'_l1klj8a-3-5-0',variantClassNames:{orientation:{horizontal:'_l1klj8b-3-5-0',vertical:'_l1klj8c-3-5-0'}},defaultVariants:{},compoundVariants:[]});\nexport var resizeContainer = _7a468({defaultClassName:'_l1klj82-3-5-0',variantClassNames:{orientation:{horizontal:'_l1klj83-3-5-0',vertical:'_l1klj84-3-5-0'},loading:{true:'_l1klj85-3-5-0'}},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-layout/context/ChartLayoutOrientation.context.js

@@ -1,5 +1,5 @@
 import { createContext } from "react";
-import { ORIENTATION } from "../types/constants.js";
+import { ORIENTATION } from "../../../constants.js";
 const ChartLayoutOrientationContext = createContext({
   orientation: ORIENTATION.Vertical
 });

package/esm/charts/core/components/chart-layout/context/ChartLayoutOrientation.context.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/chart-layout/context/ChartLayoutOrientation.context.ts"],
-  "sourcesContent": ["import { createContext } from 'react';\n\nimport type { Orientation } from '../../../../../core/types/orientation.js';\nimport { ORIENTATION } from '../types/constants.js';\n\nexport const ChartLayoutOrientationContext = createContext<{\n  orientation: Orientation;\n}>({\n  orientation: ORIENTATION.Vertical,\n});\n\nChartLayoutOrientationContext['displayName'] = 'ChartLayoutOrientationContext';\n"],
+  "sourcesContent": ["import { createContext } from 'react';\n\nimport type { Orientation } from '../../../../../core/types/orientation.js';\nimport { ORIENTATION } from '../../../constants.js';\n\nexport const ChartLayoutOrientationContext = createContext<{\n  orientation: Orientation;\n}>({\n  orientation: ORIENTATION.Vertical,\n});\n\nChartLayoutOrientationContext['displayName'] = 'ChartLayoutOrientationContext';\n"],
   "mappings": "AAAA,SAAS,qBAAqB;AAG9B,SAAS,mBAAmB;AAErB,MAAM,gCAAgC,cAE1C;AAAA,EACD,aAAa,YAAY;AAC3B,CAAC;AAED,8BAA8B,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/core/components/chart-layout/hooks/useAutomaticRatio.js

@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useState } from "react";
+import { ORIENTATION } from "../../../constants.js";
 import {
   CATEGORICAL_LEGEND_CLASS,
   MIN_ITEM_WIDTH
 } from "../../legend/categorical/constants.js";
 import { RANGE_LEGEND_CLASS } from "../../legend/range/constants.js";
-import { ORIENTATION } from "../types/constants.js";
 import {
   getLabelsHeightForRangeBottom,
   getMaxItemSizeForCategoricalHorizontal,

package/esm/charts/core/components/chart-layout/hooks/useAutomaticRatio.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/chart-layout/hooks/useAutomaticRatio.tsx"],
-  "sourcesContent": ["import { useCallback, useEffect, useState } from 'react';\n\nimport { Dimensions } from '../../../types/dimensions.js';\nimport { ChartLegendOrientation, LegendRatio } from '../../../types/legend.js';\nimport {\n  CATEGORICAL_LEGEND_CLASS,\n  MIN_ITEM_WIDTH,\n} from '../../legend/categorical/constants.js';\nimport { RANGE_LEGEND_CLASS } from '../../legend/range/constants.js';\nimport { ORIENTATION } from '../types/constants.js';\nimport {\n  getLabelsHeightForRangeBottom,\n  getMaxItemSizeForCategoricalHorizontal,\n  getMaxLabelForRangeHorizontal,\n  getSizeForCategoricaVertical,\n} from '../utils/automatic-ratio.js';\n\ninterface AutomaticRatioParams {\n  legendCandidateSize?: number;\n  legendRef: (node: HTMLDivElement) => void;\n  readyForAutoRatio: boolean;\n  refreshAutoRatio: () => void;\n}\n\n/**\n * Hook responsible of determining the best ratio to apply to the chart in order\n * to fully display the content of the legend.\n * @param orientation -\n * @param ratio -\n * @param containerAvailableArea -\n */\nexport const useAutomaticRatio = (\n  orientation: ChartLegendOrientation,\n  ratio: LegendRatio,\n  containerAvailableArea: Dimensions,\n): AutomaticRatioParams => {\n  const [readyForAutoRatio, setReadyForAutoRatio] = useState(false);\n  const [idealLegendSize, setIdealLegendSize] = useState<number | undefined>(\n    undefined,\n  );\n  const resetAutoRatio = () => {\n    setReadyForAutoRatio(false);\n    setIdealLegendSize(undefined);\n  };\n\n  useEffect(() => {\n    resetAutoRatio();\n  }, [orientation]);\n\n  const legendRef = useCallback(\n    (node: HTMLDivElement) => {\n      const { height: containerHeight } = containerAvailableArea;\n      const hasAutoRatioEnabled = !ratio || ratio === 'auto';\n\n      if (!hasAutoRatioEnabled) {\n        setReadyForAutoRatio(true);\n        return;\n      }\n      if (node === null || containerHeight === 0 || readyForAutoRatio) {\n        return;\n      }\n\n      let longestSeries;\n\n      const isCategoricalLegend = Array.from(node.classList).includes(\n        CATEGORICAL_LEGEND_CLASS,\n      );\n      const isRangeLegend = Array.from(node.classList).includes(\n        RANGE_LEGEND_CLASS,\n      );\n\n      if (isCategoricalLegend) {\n        longestSeries =\n          orientation === ORIENTATION.Horizontal\n            ? getMaxItemSizeForCategoricalHorizontal(node, containerHeight)\n            : getSizeForCategoricaVertical();\n      }\n      if (isRangeLegend) {\n        const hasLoadedLabels = node.getElementsByTagName('g').length !== 0;\n        if (!hasLoadedLabels) {\n          return;\n        }\n\n        longestSeries =\n          orientation === ORIENTATION.Horizontal\n            ? getMaxLabelForRangeHorizontal(node)\n            : getLabelsHeightForRangeBottom(node);\n      }\n\n      if (!readyForAutoRatio) {\n        setIdealLegendSize(\n          longestSeries !== undefined && longestSeries > 0\n            ? longestSeries\n            : MIN_ITEM_WIDTH,\n        );\n        setReadyForAutoRatio(true);\n      }\n    },\n    [readyForAutoRatio, containerAvailableArea, ratio, orientation],\n  );\n\n  return {\n    legendCandidateSize: idealLegendSize,\n    legendRef,\n    readyForAutoRatio,\n    refreshAutoRatio: resetAutoRatio,\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,aAAa,WAAW,gBAAgB;AAIjD;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,0BAA0B;AACnC,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAgBA,MAAM,oBAAoB,CAC/B,aACA,OACA,2BACyB;AACzB,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,KAAK;AAChE,QAAM,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,IAC5C;AAAA,EACF;AACA,QAAM,iBAAiB,MAAM;AAC3B,yBAAqB,KAAK;AAC1B,uBAAmB,MAAS;AAAA,EAC9B;AAEA,YAAU,MAAM;AACd,mBAAe;AAAA,EACjB,GAAG,CAAC,WAAW,CAAC;AAEhB,QAAM,YAAY;AAAA,IAChB,CAAC,SAAyB;AACxB,YAAM,EAAE,QAAQ,gBAAgB,IAAI;AACpC,YAAM,sBAAsB,CAAC,SAAS,UAAU;AAEhD,UAAI,CAAC,qBAAqB;AACxB,6BAAqB,IAAI;AACzB;AAAA,MACF;AACA,UAAI,SAAS,QAAQ,oBAAoB,KAAK,mBAAmB;AAC/D;AAAA,MACF;AAEA,UAAI;AAEJ,YAAM,sBAAsB,MAAM,KAAK,KAAK,SAAS,EAAE;AAAA,QACrD;AAAA,MACF;AACA,YAAM,gBAAgB,MAAM,KAAK,KAAK,SAAS,EAAE;AAAA,QAC/C;AAAA,MACF;AAEA,UAAI,qBAAqB;AACvB,wBACE,gBAAgB,YAAY,aACxB,uCAAuC,MAAM,eAAe,IAC5D,6BAA6B;AAAA,MACrC;AACA,UAAI,eAAe;AACjB,cAAM,kBAAkB,KAAK,qBAAqB,GAAG,EAAE,WAAW;AAClE,YAAI,CAAC,iBAAiB;AACpB;AAAA,QACF;AAEA,wBACE,gBAAgB,YAAY,aACxB,8BAA8B,IAAI,IAClC,8BAA8B,IAAI;AAAA,MAC1C;AAEA,UAAI,CAAC,mBAAmB;AACtB;AAAA,UACE,kBAAkB,UAAa,gBAAgB,IAC3C,gBACA;AAAA,QACN;AACA,6BAAqB,IAAI;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,wBAAwB,OAAO,WAAW;AAAA,EAChE;AAEA,SAAO;AAAA,IACL,qBAAqB;AAAA,IACrB;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,EACpB;AACF;",
+  "sourcesContent": ["import { useCallback, useEffect, useState } from 'react';\n\nimport { ORIENTATION } from '../../../constants.js';\nimport { Dimensions } from '../../../types/dimensions.js';\nimport { ChartLegendOrientation, LegendRatio } from '../../../types/legend.js';\nimport {\n  CATEGORICAL_LEGEND_CLASS,\n  MIN_ITEM_WIDTH,\n} from '../../legend/categorical/constants.js';\nimport { RANGE_LEGEND_CLASS } from '../../legend/range/constants.js';\nimport {\n  getLabelsHeightForRangeBottom,\n  getMaxItemSizeForCategoricalHorizontal,\n  getMaxLabelForRangeHorizontal,\n  getSizeForCategoricaVertical,\n} from '../utils/automatic-ratio.js';\n\ninterface AutomaticRatioParams {\n  legendCandidateSize?: number;\n  legendRef: (node: HTMLDivElement) => void;\n  readyForAutoRatio: boolean;\n  refreshAutoRatio: () => void;\n}\n\n/**\n * Hook responsible of determining the best ratio to apply to the chart in order\n * to fully display the content of the legend.\n * @param orientation -\n * @param ratio -\n * @param containerAvailableArea -\n */\nexport const useAutomaticRatio = (\n  orientation: ChartLegendOrientation,\n  ratio: LegendRatio,\n  containerAvailableArea: Dimensions,\n): AutomaticRatioParams => {\n  const [readyForAutoRatio, setReadyForAutoRatio] = useState(false);\n  const [idealLegendSize, setIdealLegendSize] = useState<number | undefined>(\n    undefined,\n  );\n  const resetAutoRatio = () => {\n    setReadyForAutoRatio(false);\n    setIdealLegendSize(undefined);\n  };\n\n  useEffect(() => {\n    resetAutoRatio();\n  }, [orientation]);\n\n  const legendRef = useCallback(\n    (node: HTMLDivElement) => {\n      const { height: containerHeight } = containerAvailableArea;\n      const hasAutoRatioEnabled = !ratio || ratio === 'auto';\n\n      if (!hasAutoRatioEnabled) {\n        setReadyForAutoRatio(true);\n        return;\n      }\n      if (node === null || containerHeight === 0 || readyForAutoRatio) {\n        return;\n      }\n\n      let longestSeries;\n\n      const isCategoricalLegend = Array.from(node.classList).includes(\n        CATEGORICAL_LEGEND_CLASS,\n      );\n      const isRangeLegend = Array.from(node.classList).includes(\n        RANGE_LEGEND_CLASS,\n      );\n\n      if (isCategoricalLegend) {\n        longestSeries =\n          orientation === ORIENTATION.Horizontal\n            ? getMaxItemSizeForCategoricalHorizontal(node, containerHeight)\n            : getSizeForCategoricaVertical();\n      }\n      if (isRangeLegend) {\n        const hasLoadedLabels = node.getElementsByTagName('g').length !== 0;\n        if (!hasLoadedLabels) {\n          return;\n        }\n\n        longestSeries =\n          orientation === ORIENTATION.Horizontal\n            ? getMaxLabelForRangeHorizontal(node)\n            : getLabelsHeightForRangeBottom(node);\n      }\n\n      if (!readyForAutoRatio) {\n        setIdealLegendSize(\n          longestSeries !== undefined && longestSeries > 0\n            ? longestSeries\n            : MIN_ITEM_WIDTH,\n        );\n        setReadyForAutoRatio(true);\n      }\n    },\n    [readyForAutoRatio, containerAvailableArea, ratio, orientation],\n  );\n\n  return {\n    legendCandidateSize: idealLegendSize,\n    legendRef,\n    readyForAutoRatio,\n    refreshAutoRatio: resetAutoRatio,\n  };\n};\n"],
+  "mappings": "AAAA,SAAS,aAAa,WAAW,gBAAgB;AAEjD,SAAS,mBAAmB;AAG5B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAgBA,MAAM,oBAAoB,CAC/B,aACA,OACA,2BACyB;AACzB,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,KAAK;AAChE,QAAM,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,IAC5C;AAAA,EACF;AACA,QAAM,iBAAiB,MAAM;AAC3B,yBAAqB,KAAK;AAC1B,uBAAmB,MAAS;AAAA,EAC9B;AAEA,YAAU,MAAM;AACd,mBAAe;AAAA,EACjB,GAAG,CAAC,WAAW,CAAC;AAEhB,QAAM,YAAY;AAAA,IAChB,CAAC,SAAyB;AACxB,YAAM,EAAE,QAAQ,gBAAgB,IAAI;AACpC,YAAM,sBAAsB,CAAC,SAAS,UAAU;AAEhD,UAAI,CAAC,qBAAqB;AACxB,6BAAqB,IAAI;AACzB;AAAA,MACF;AACA,UAAI,SAAS,QAAQ,oBAAoB,KAAK,mBAAmB;AAC/D;AAAA,MACF;AAEA,UAAI;AAEJ,YAAM,sBAAsB,MAAM,KAAK,KAAK,SAAS,EAAE;AAAA,QACrD;AAAA,MACF;AACA,YAAM,gBAAgB,MAAM,KAAK,KAAK,SAAS,EAAE;AAAA,QAC/C;AAAA,MACF;AAEA,UAAI,qBAAqB;AACvB,wBACE,gBAAgB,YAAY,aACxB,uCAAuC,MAAM,eAAe,IAC5D,6BAA6B;AAAA,MACrC;AACA,UAAI,eAAe;AACjB,cAAM,kBAAkB,KAAK,qBAAqB,GAAG,EAAE,WAAW;AAClE,YAAI,CAAC,iBAAiB;AACpB;AAAA,QACF;AAEA,wBACE,gBAAgB,YAAY,aACxB,8BAA8B,IAAI,IAClC,8BAA8B,IAAI;AAAA,MAC1C;AAEA,UAAI,CAAC,mBAAmB;AACtB;AAAA,UACE,kBAAkB,UAAa,gBAAgB,IAC3C,gBACA;AAAA,QACN;AACA,6BAAqB,IAAI;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,wBAAwB,OAAO,WAAW;AAAA,EAChE;AAEA,SAAO;AAAA,IACL,qBAAqB;AAAA,IACrB;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,EACpB;AACF;",
   "names": []
 }

package/esm/charts/core/components/chart-layout/types/constants.js

@@ -20,10 +20,6 @@ const MAX_AUTO_RATIO_SIZE = 0.3;
 const MIN_LEGEND_HEIGHT = 30;
 const MIN_LEGEND_WIDTH = 70;
 const MIN_PLOT_SIZE = 100;
-const ORIENTATION = {
-  Horizontal: "horizontal",
-  Vertical: "vertical"
-};
 const TEMPLATE_AREA_FOR_GRAPH = '"graphArea"';
 const TEMPLATE_AREA_FOR_RESIZABLE_CHART_LAYOUT = '"graphArea horizontalResize verticalLegend" "verticalResize . ." "horizontalLegend horizontalLegend horizontalLegend"';
 const TEMPLATE_AREA_FOR_FIXED_CHART_LAYOUT = '"graphArea verticalLegend" "horizontalLegend horizontalLegend"';
@@ -39,7 +35,6 @@ export {
   MIN_LEGEND_HEIGHT,
   MIN_LEGEND_WIDTH,
   MIN_PLOT_SIZE,
-  ORIENTATION,
   TEMPLATE_AREA_FOR_FIXED_CHART_LAYOUT,
   TEMPLATE_AREA_FOR_GRAPH,
   TEMPLATE_AREA_FOR_RESIZABLE_CHART_LAYOUT

package/esm/charts/core/components/chart-layout/types/constants.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/chart-layout/types/constants.ts"],
-  "sourcesContent": ["import { ChartLayoutLegendSizes, LegendProps } from './chart-layout.js';\nimport type { Orientation } from '../../../../../core/types/orientation.js';\nimport { defaultRatio } from '../../../constants.js';\nimport type { MappedObject } from '../../../types/helpers/mapped-object.js';\nimport { LegendPosition } from '../../../types/legend.js';\n\nexport const DEFAULT_POSITION: LegendPosition = 'auto';\nexport const DEFAULT_RATIO_BOUNDARIES: ChartLayoutLegendSizes = {\n  minWidth: 0.1,\n  minHeight: 0.1,\n  maxWidth: 0.8,\n  maxHeight: 0.7,\n};\nexport const DEFAULT_LAYOUT_HEIGHT = '300';\nexport const DEFAULT_LAYOUT_WIDTH = '100%';\nexport const DEFAULT_LEGEND_CONFIG: LegendProps = {\n  position: DEFAULT_POSITION,\n  ratioBoundaries: DEFAULT_RATIO_BOUNDARIES,\n  ratio: defaultRatio,\n  overrideRatio: undefined,\n};\nexport const LOADING_STATE_OPACITY = 40;\nexport const DEFAULT_RESIZER_SIZE = 15;\nexport const MAX_AUTO_RATIO_SIZE = 0.3;\nexport const MIN_LEGEND_HEIGHT = 30; // px\nexport const MIN_LEGEND_WIDTH = 70; // px\nexport const MIN_PLOT_SIZE = 100; // px\nexport const ORIENTATION: MappedObject<Orientation> = {\n  Horizontal: 'horizontal',\n  Vertical: 'vertical',\n};\nexport const TEMPLATE_AREA_FOR_GRAPH = '\"graphArea\"';\nexport const TEMPLATE_AREA_FOR_RESIZABLE_CHART_LAYOUT =\n  '\"graphArea horizontalResize verticalLegend\" \"verticalResize . .\" \"horizontalLegend horizontalLegend horizontalLegend\"';\nexport const TEMPLATE_AREA_FOR_FIXED_CHART_LAYOUT =\n  '\"graphArea verticalLegend\" \"horizontalLegend horizontalLegend\"';\n"],
-  "mappings": "AAEA,SAAS,oBAAoB;AAItB,MAAM,mBAAmC;AACzC,MAAM,2BAAmD;AAAA,EAC9D,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU;AAAA,EACV,WAAW;AACb;AACO,MAAM,wBAAwB;AAC9B,MAAM,uBAAuB;AAC7B,MAAM,wBAAqC;AAAA,EAChD,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,eAAe;AACjB;AACO,MAAM,wBAAwB;AAC9B,MAAM,uBAAuB;AAC7B,MAAM,sBAAsB;AAC5B,MAAM,oBAAoB;AAC1B,MAAM,mBAAmB;AACzB,MAAM,gBAAgB;AACtB,MAAM,cAAyC;AAAA,EACpD,YAAY;AAAA,EACZ,UAAU;AACZ;AACO,MAAM,0BAA0B;AAChC,MAAM,2CACX;AACK,MAAM,uCACX;",
+  "sourcesContent": ["import { ChartLayoutLegendSizes, LegendProps } from './chart-layout.js';\nimport { defaultRatio } from '../../../constants.js';\nimport { LegendPosition } from '../../../types/legend.js';\n\nexport const DEFAULT_POSITION: LegendPosition = 'auto';\nexport const DEFAULT_RATIO_BOUNDARIES: ChartLayoutLegendSizes = {\n  minWidth: 0.1,\n  minHeight: 0.1,\n  maxWidth: 0.8,\n  maxHeight: 0.7,\n};\nexport const DEFAULT_LAYOUT_HEIGHT = '300';\nexport const DEFAULT_LAYOUT_WIDTH = '100%';\nexport const DEFAULT_LEGEND_CONFIG: LegendProps = {\n  position: DEFAULT_POSITION,\n  ratioBoundaries: DEFAULT_RATIO_BOUNDARIES,\n  ratio: defaultRatio,\n  overrideRatio: undefined,\n};\nexport const LOADING_STATE_OPACITY = 40;\nexport const DEFAULT_RESIZER_SIZE = 15;\nexport const MAX_AUTO_RATIO_SIZE = 0.3;\nexport const MIN_LEGEND_HEIGHT = 30; // px\nexport const MIN_LEGEND_WIDTH = 70; // px\nexport const MIN_PLOT_SIZE = 100; // px\nexport const TEMPLATE_AREA_FOR_GRAPH = '\"graphArea\"';\nexport const TEMPLATE_AREA_FOR_RESIZABLE_CHART_LAYOUT =\n  '\"graphArea horizontalResize verticalLegend\" \"verticalResize . .\" \"horizontalLegend horizontalLegend horizontalLegend\"';\nexport const TEMPLATE_AREA_FOR_FIXED_CHART_LAYOUT =\n  '\"graphArea verticalLegend\" \"horizontalLegend horizontalLegend\"';\n"],
+  "mappings": "AACA,SAAS,oBAAoB;AAGtB,MAAM,mBAAmC;AACzC,MAAM,2BAAmD;AAAA,EAC9D,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU;AAAA,EACV,WAAW;AACb;AACO,MAAM,wBAAwB;AAC9B,MAAM,uBAAuB;AAC7B,MAAM,wBAAqC;AAAA,EAChD,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,eAAe;AACjB;AACO,MAAM,wBAAwB;AAC9B,MAAM,uBAAuB;AAC7B,MAAM,sBAAsB;AAC5B,MAAM,oBAAoB;AAC1B,MAAM,mBAAmB;AACzB,MAAM,gBAAgB;AACtB,MAAM,0BAA0B;AAChC,MAAM,2CACX;AACK,MAAM,uCACX;",
   "names": []
 }

package/esm/charts/core/components/chart-layout/utils/get-areas-size-on-drag.js

@@ -1,9 +1,9 @@
 import { calculateGraphSize } from "./calculate-graph-size.js";
+import { ORIENTATION } from "../../../constants.js";
 import {
   MIN_LEGEND_HEIGHT,
   MIN_LEGEND_WIDTH,
-  MIN_PLOT_SIZE,
-  ORIENTATION
+  MIN_PLOT_SIZE
 } from "../types/constants.js";
 const getAreasWidthSize = (containerHeight, containerWidth, minWidth, maxWidth, resizerWrapperSize, draggedAmount, legendContainer) => {
   const minLegendWidth = Math.min(containerWidth * minWidth, MIN_LEGEND_WIDTH);

package/esm/charts/core/components/chart-layout/utils/get-areas-size-on-drag.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/chart-layout/utils/get-areas-size-on-drag.ts"],
-  "sourcesContent": ["import { calculateGraphSize } from './calculate-graph-size.js';\nimport type { Orientation } from '../../../../../core/types/orientation.js';\nimport type { Dimensions } from '../../../types/dimensions.js';\nimport type { AreasSizes } from '../types/chart-layout-internal.js';\nimport {\n  MIN_LEGEND_HEIGHT,\n  MIN_LEGEND_WIDTH,\n  MIN_PLOT_SIZE,\n  ORIENTATION,\n} from '../types/constants.js';\n\ntype GetAreasSizeHandlerProps = (\n  containerHeight: number,\n  containerWidth: number,\n  minWidth: number,\n  maxWidth: number,\n  resizerWrapperSize: number,\n  draggedAmount: number,\n  legendContainer: HTMLDivElement,\n) => AreasSizes | undefined;\n\nconst getAreasWidthSize: GetAreasSizeHandlerProps = (\n  containerHeight,\n  containerWidth,\n  minWidth,\n  maxWidth,\n  resizerWrapperSize,\n  draggedAmount,\n  legendContainer,\n) => {\n  const minLegendWidth = Math.min(containerWidth * minWidth, MIN_LEGEND_WIDTH);\n\n  if (legendContainer.clientWidth - draggedAmount <= minLegendWidth) {\n    const legend: Dimensions = {\n      height: containerHeight,\n      width: minLegendWidth,\n    };\n\n    const graph: Dimensions = {\n      width: calculateGraphSize(\n        containerWidth,\n        minLegendWidth,\n        resizerWrapperSize,\n      ),\n      height: containerHeight,\n    };\n\n    return { legend, graph };\n  }\n\n  const availableWidth = containerWidth - resizerWrapperSize;\n  const maxWidthAllowed = Math.max(\n    availableWidth * maxWidth,\n    availableWidth - MIN_PLOT_SIZE,\n  );\n\n  if (legendContainer.clientWidth - draggedAmount >= maxWidthAllowed) {\n    const legend: Dimensions = {\n      height: containerHeight,\n      width: maxWidthAllowed,\n    };\n\n    const graph: Dimensions = {\n      width: calculateGraphSize(\n        containerWidth,\n        maxWidthAllowed,\n        resizerWrapperSize,\n      ),\n      height: containerHeight,\n    };\n\n    return { legend, graph };\n  }\n};\n\nconst getAreasHeightSize: GetAreasSizeHandlerProps = (\n  containerHeight,\n  containerWidth,\n  minHeight,\n  maxHeight,\n  resizerWrapperSize,\n  draggedAmount,\n  legendContainer,\n) => {\n  const minLegendHeight = Math.min(\n    containerHeight * minHeight,\n    MIN_LEGEND_HEIGHT,\n  );\n\n  if (legendContainer.clientHeight - draggedAmount <= minLegendHeight) {\n    const legend: Dimensions = {\n      height: minLegendHeight,\n      width: containerWidth,\n    };\n\n    const graph: Dimensions = {\n      height: calculateGraphSize(\n        containerHeight,\n        minLegendHeight,\n        resizerWrapperSize,\n      ),\n      width: containerWidth,\n    };\n\n    return { legend, graph };\n  }\n\n  const availableHeight = containerHeight - resizerWrapperSize;\n  const maxHeightAllowed = Math.max(\n    availableHeight * maxHeight,\n    availableHeight - MIN_PLOT_SIZE,\n  );\n\n  if (legendContainer.clientHeight - draggedAmount >= maxHeightAllowed) {\n    const legend: Dimensions = {\n      height: maxHeightAllowed,\n      width: containerWidth,\n    };\n\n    const graph: Dimensions = {\n      height: calculateGraphSize(\n        containerHeight,\n        maxHeightAllowed,\n        resizerWrapperSize,\n      ),\n      width: containerWidth,\n    };\n\n    return { legend, graph };\n  }\n};\n\nexport const getDefaultAreasSize = (\n  areasSizes: AreasSizes,\n  draggedAmount: number,\n  containerSize: number,\n  resizerWrapperSize: number,\n  orientation: Orientation,\n) => {\n  const { graph, legend } = areasSizes;\n\n  const isVertical = orientation === ORIENTATION.Vertical;\n\n  const legendHeight = isVertical\n    ? legend.height - draggedAmount\n    : legend.height;\n  const legendWidth = isVertical ? legend.width : legend.width - draggedAmount;\n\n  const graphHeight = isVertical\n    ? calculateGraphSize(containerSize, legendHeight, resizerWrapperSize)\n    : graph.height;\n  const graphWidth = isVertical\n    ? graph.width\n    : calculateGraphSize(containerSize, legendWidth, resizerWrapperSize);\n\n  return {\n    legend: { height: legendHeight, width: legendWidth },\n    graph: { height: graphHeight, width: graphWidth },\n  };\n};\n\nexport const getAreasSizeOnDragHandlers = (\n  containerHeight: number,\n  containerWidth: number,\n  legendContainer: HTMLDivElement,\n  resizerWrapperSize: number,\n) => ({\n  getAreasHeightSizeOnDrag: (\n    minHeight: number,\n    maxHeight: number,\n    verticalDraggedAmount = 0,\n  ) =>\n    getAreasHeightSize(\n      containerHeight,\n      containerWidth,\n      minHeight,\n      maxHeight,\n      resizerWrapperSize,\n      verticalDraggedAmount,\n      legendContainer,\n    ),\n  getAreasWidthSizeOnDrag: (\n    minWidth: number,\n    maxWidth: number,\n    horizontalDraggedAmount = 0,\n  ) =>\n    getAreasWidthSize(\n      containerHeight,\n      containerWidth,\n      minWidth,\n      maxWidth,\n      resizerWrapperSize,\n      horizontalDraggedAmount,\n      legendContainer,\n    ),\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { calculateGraphSize } from './calculate-graph-size.js';\nimport type { Orientation } from '../../../../../core/types/orientation.js';\nimport { ORIENTATION } from '../../../constants.js';\nimport type { Dimensions } from '../../../types/dimensions.js';\nimport type { AreasSizes } from '../types/chart-layout-internal.js';\nimport {\n  MIN_LEGEND_HEIGHT,\n  MIN_LEGEND_WIDTH,\n  MIN_PLOT_SIZE,\n} from '../types/constants.js';\n\ntype GetAreasSizeHandlerProps = (\n  containerHeight: number,\n  containerWidth: number,\n  minWidth: number,\n  maxWidth: number,\n  resizerWrapperSize: number,\n  draggedAmount: number,\n  legendContainer: HTMLDivElement,\n) => AreasSizes | undefined;\n\nconst getAreasWidthSize: GetAreasSizeHandlerProps = (\n  containerHeight,\n  containerWidth,\n  minWidth,\n  maxWidth,\n  resizerWrapperSize,\n  draggedAmount,\n  legendContainer,\n) => {\n  const minLegendWidth = Math.min(containerWidth * minWidth, MIN_LEGEND_WIDTH);\n\n  if (legendContainer.clientWidth - draggedAmount <= minLegendWidth) {\n    const legend: Dimensions = {\n      height: containerHeight,\n      width: minLegendWidth,\n    };\n\n    const graph: Dimensions = {\n      width: calculateGraphSize(\n        containerWidth,\n        minLegendWidth,\n        resizerWrapperSize,\n      ),\n      height: containerHeight,\n    };\n\n    return { legend, graph };\n  }\n\n  const availableWidth = containerWidth - resizerWrapperSize;\n  const maxWidthAllowed = Math.max(\n    availableWidth * maxWidth,\n    availableWidth - MIN_PLOT_SIZE,\n  );\n\n  if (legendContainer.clientWidth - draggedAmount >= maxWidthAllowed) {\n    const legend: Dimensions = {\n      height: containerHeight,\n      width: maxWidthAllowed,\n    };\n\n    const graph: Dimensions = {\n      width: calculateGraphSize(\n        containerWidth,\n        maxWidthAllowed,\n        resizerWrapperSize,\n      ),\n      height: containerHeight,\n    };\n\n    return { legend, graph };\n  }\n};\n\nconst getAreasHeightSize: GetAreasSizeHandlerProps = (\n  containerHeight,\n  containerWidth,\n  minHeight,\n  maxHeight,\n  resizerWrapperSize,\n  draggedAmount,\n  legendContainer,\n) => {\n  const minLegendHeight = Math.min(\n    containerHeight * minHeight,\n    MIN_LEGEND_HEIGHT,\n  );\n\n  if (legendContainer.clientHeight - draggedAmount <= minLegendHeight) {\n    const legend: Dimensions = {\n      height: minLegendHeight,\n      width: containerWidth,\n    };\n\n    const graph: Dimensions = {\n      height: calculateGraphSize(\n        containerHeight,\n        minLegendHeight,\n        resizerWrapperSize,\n      ),\n      width: containerWidth,\n    };\n\n    return { legend, graph };\n  }\n\n  const availableHeight = containerHeight - resizerWrapperSize;\n  const maxHeightAllowed = Math.max(\n    availableHeight * maxHeight,\n    availableHeight - MIN_PLOT_SIZE,\n  );\n\n  if (legendContainer.clientHeight - draggedAmount >= maxHeightAllowed) {\n    const legend: Dimensions = {\n      height: maxHeightAllowed,\n      width: containerWidth,\n    };\n\n    const graph: Dimensions = {\n      height: calculateGraphSize(\n        containerHeight,\n        maxHeightAllowed,\n        resizerWrapperSize,\n      ),\n      width: containerWidth,\n    };\n\n    return { legend, graph };\n  }\n};\n\nexport const getDefaultAreasSize = (\n  areasSizes: AreasSizes,\n  draggedAmount: number,\n  containerSize: number,\n  resizerWrapperSize: number,\n  orientation: Orientation,\n) => {\n  const { graph, legend } = areasSizes;\n\n  const isVertical = orientation === ORIENTATION.Vertical;\n\n  const legendHeight = isVertical\n    ? legend.height - draggedAmount\n    : legend.height;\n  const legendWidth = isVertical ? legend.width : legend.width - draggedAmount;\n\n  const graphHeight = isVertical\n    ? calculateGraphSize(containerSize, legendHeight, resizerWrapperSize)\n    : graph.height;\n  const graphWidth = isVertical\n    ? graph.width\n    : calculateGraphSize(containerSize, legendWidth, resizerWrapperSize);\n\n  return {\n    legend: { height: legendHeight, width: legendWidth },\n    graph: { height: graphHeight, width: graphWidth },\n  };\n};\n\nexport const getAreasSizeOnDragHandlers = (\n  containerHeight: number,\n  containerWidth: number,\n  legendContainer: HTMLDivElement,\n  resizerWrapperSize: number,\n) => ({\n  getAreasHeightSizeOnDrag: (\n    minHeight: number,\n    maxHeight: number,\n    verticalDraggedAmount = 0,\n  ) =>\n    getAreasHeightSize(\n      containerHeight,\n      containerWidth,\n      minHeight,\n      maxHeight,\n      resizerWrapperSize,\n      verticalDraggedAmount,\n      legendContainer,\n    ),\n  getAreasWidthSizeOnDrag: (\n    minWidth: number,\n    maxWidth: number,\n    horizontalDraggedAmount = 0,\n  ) =>\n    getAreasWidthSize(\n      containerHeight,\n      containerWidth,\n      minWidth,\n      maxWidth,\n      resizerWrapperSize,\n      horizontalDraggedAmount,\n      legendContainer,\n    ),\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/core/components/chart-layout/utils/get-chart-layout-settings.js

@@ -2,11 +2,10 @@ import { isUndefined } from "lodash-es";
 import { extractLayoutSlots } from "./extract-layout-slots.js";
 import { getOrientation } from "./orientation.js";
 import { sanitizeLegendRatio } from "./sanitize-legend-ratio.js";
-import { defaultRatio } from "../../../constants.js";
+import { defaultRatio, ORIENTATION } from "../../../constants.js";
 import {
   DEFAULT_LEGEND_CONFIG,
-  DEFAULT_RATIO_BOUNDARIES,
-  ORIENTATION
+  DEFAULT_RATIO_BOUNDARIES
 } from "../types/constants.js";
 const getChartLayoutSettings = (containerSizes, children, isEmpty) => {
   const { provider, graphArea, legendArea, legendProps } = extractLayoutSlots(children);

package/esm/charts/core/components/chart-layout/utils/get-chart-layout-settings.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/chart-layout/utils/get-chart-layout-settings.ts"],
-  "sourcesContent": ["import { isUndefined } from 'lodash-es';\nimport { type ReactNode } from 'react';\n\nimport { extractLayoutSlots } from './extract-layout-slots.js';\nimport { getOrientation } from './orientation.js';\nimport { sanitizeLegendRatio } from './sanitize-legend-ratio.js';\nimport { defaultRatio } from '../../../constants.js';\nimport {\n  ChartLayoutDimensions,\n  ChartLayoutSettings,\n} from '../types/chart-layout.js';\nimport {\n  DEFAULT_LEGEND_CONFIG,\n  DEFAULT_RATIO_BOUNDARIES,\n  ORIENTATION,\n} from '../types/constants.js';\n\n/**\n * Function responsible to calculate the setup params for the chart layout (\n * e.g. orientation, resizable state, ratio etc.)\n * @param containerSizes -\n * @param children -\n * @param isEmpty -\n */\nexport const getChartLayoutSettings = (\n  containerSizes: ChartLayoutDimensions,\n  children: ReactNode,\n  isEmpty: boolean,\n): ChartLayoutSettings => {\n  const { provider, graphArea, legendArea, legendProps } =\n    extractLayoutSlots(children);\n\n  const containerAvailableArea = {\n    width: containerSizes.width,\n    height: containerSizes.height,\n  };\n\n  if (!legendArea) {\n    return {\n      graphArea,\n      containerAvailableArea,\n      legendSettings: {\n        orientation: ORIENTATION.Vertical,\n        showResizer: false,\n        hidden: true,\n        ratio: 0,\n        ratioBoundaries: DEFAULT_RATIO_BOUNDARIES,\n      },\n      provider,\n    };\n  }\n  const {\n    position,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    ratio = defaultRatio,\n    initialRatio,\n    onResize,\n    overrideRatio,\n    ratioBoundaries = DEFAULT_RATIO_BOUNDARIES,\n  } = legendProps ?? DEFAULT_LEGEND_CONFIG;\n\n  const orientation = getOrientation(\n    containerAvailableArea.width,\n    containerAvailableArea.height,\n    position,\n  );\n\n  return {\n    graphArea,\n    legendArea,\n    containerAvailableArea,\n    legendSettings: {\n      orientation,\n      showResizer: !isEmpty,\n      hidden: isUndefined(legendArea),\n      ratio: sanitizeLegendRatio(ratio, ratioBoundaries, orientation),\n      initialRatio: initialRatio\n        ? sanitizeLegendRatio(initialRatio, ratioBoundaries, orientation)\n        : undefined,\n      overrideRatio,\n      ratioBoundaries,\n      onResize,\n    },\n    provider,\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAG5B,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAK7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AASA,MAAM,yBAAyB,CACpC,gBACA,UACA,YACwB;AACxB,QAAM,EAAE,UAAU,WAAW,YAAY,YAAY,IACnD,mBAAmB,QAAQ;AAE7B,QAAM,yBAAyB;AAAA,IAC7B,OAAO,eAAe;AAAA,IACtB,QAAQ,eAAe;AAAA,EACzB;AAEA,MAAI,CAAC,YAAY;AACf,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,QACd,aAAa,YAAY;AAAA,QACzB,aAAa;AAAA,QACb,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,iBAAiB;AAAA,MACnB;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,QAAM;AAAA,IACJ;AAAA;AAAA,IAEA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,EACpB,IAAI,eAAe;AAEnB,QAAM,cAAc;AAAA,IAClB,uBAAuB;AAAA,IACvB,uBAAuB;AAAA,IACvB;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,MACd;AAAA,MACA,aAAa,CAAC;AAAA,MACd,QAAQ,YAAY,UAAU;AAAA,MAC9B,OAAO,oBAAoB,OAAO,iBAAiB,WAAW;AAAA,MAC9D,cAAc,eACV,oBAAoB,cAAc,iBAAiB,WAAW,IAC9D;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { isUndefined } from 'lodash-es';\nimport { type ReactNode } from 'react';\n\nimport { extractLayoutSlots } from './extract-layout-slots.js';\nimport { getOrientation } from './orientation.js';\nimport { sanitizeLegendRatio } from './sanitize-legend-ratio.js';\nimport { defaultRatio, ORIENTATION } from '../../../constants.js';\nimport {\n  ChartLayoutDimensions,\n  ChartLayoutSettings,\n} from '../types/chart-layout.js';\nimport {\n  DEFAULT_LEGEND_CONFIG,\n  DEFAULT_RATIO_BOUNDARIES,\n} from '../types/constants.js';\n\n/**\n * Function responsible to calculate the setup params for the chart layout (\n * e.g. orientation, resizable state, ratio etc.)\n * @param containerSizes -\n * @param children -\n * @param isEmpty -\n */\nexport const getChartLayoutSettings = (\n  containerSizes: ChartLayoutDimensions,\n  children: ReactNode,\n  isEmpty: boolean,\n): ChartLayoutSettings => {\n  const { provider, graphArea, legendArea, legendProps } =\n    extractLayoutSlots(children);\n\n  const containerAvailableArea = {\n    width: containerSizes.width,\n    height: containerSizes.height,\n  };\n\n  if (!legendArea) {\n    return {\n      graphArea,\n      containerAvailableArea,\n      legendSettings: {\n        orientation: ORIENTATION.Vertical,\n        showResizer: false,\n        hidden: true,\n        ratio: 0,\n        ratioBoundaries: DEFAULT_RATIO_BOUNDARIES,\n      },\n      provider,\n    };\n  }\n  const {\n    position,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    ratio = defaultRatio,\n    initialRatio,\n    onResize,\n    overrideRatio,\n    ratioBoundaries = DEFAULT_RATIO_BOUNDARIES,\n  } = legendProps ?? DEFAULT_LEGEND_CONFIG;\n\n  const orientation = getOrientation(\n    containerAvailableArea.width,\n    containerAvailableArea.height,\n    position,\n  );\n\n  return {\n    graphArea,\n    legendArea,\n    containerAvailableArea,\n    legendSettings: {\n      orientation,\n      showResizer: !isEmpty,\n      hidden: isUndefined(legendArea),\n      ratio: sanitizeLegendRatio(ratio, ratioBoundaries, orientation),\n      initialRatio: initialRatio\n        ? sanitizeLegendRatio(initialRatio, ratioBoundaries, orientation)\n        : undefined,\n      overrideRatio,\n      ratioBoundaries,\n      onResize,\n    },\n    provider,\n  };\n};\n"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAG5B,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,cAAc,mBAAmB;AAK1C;AAAA,EACE;AAAA,EACA;AAAA,OACK;AASA,MAAM,yBAAyB,CACpC,gBACA,UACA,YACwB;AACxB,QAAM,EAAE,UAAU,WAAW,YAAY,YAAY,IACnD,mBAAmB,QAAQ;AAE7B,QAAM,yBAAyB;AAAA,IAC7B,OAAO,eAAe;AAAA,IACtB,QAAQ,eAAe;AAAA,EACzB;AAEA,MAAI,CAAC,YAAY;AACf,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,QACd,aAAa,YAAY;AAAA,QACzB,aAAa;AAAA,QACb,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,iBAAiB;AAAA,MACnB;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,QAAM;AAAA,IACJ;AAAA;AAAA,IAEA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,EACpB,IAAI,eAAe;AAEnB,QAAM,cAAc;AAAA,IAClB,uBAAuB;AAAA,IACvB,uBAAuB;AAAA,IACvB;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,MACd;AAAA,MACA,aAAa,CAAC;AAAA,MACd,QAAQ,YAAY,UAAU;AAAA,MAC9B,OAAO,oBAAoB,OAAO,iBAAiB,WAAW;AAAA,MAC9D,cAAc,eACV,oBAAoB,cAAc,iBAAiB,WAAW,IAC9D;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/charts/core/components/chart-layout/utils/orientation.js

@@ -1,5 +1,4 @@
-import { LEGEND_POSITION } from "../../../constants.js";
-import { ORIENTATION } from "../types/constants.js";
+import { LEGEND_POSITION, ORIENTATION } from "../../../constants.js";
 const LEGEND_MIN_WIDTH = 225;
 const calculateAutoOrientation = (width, height) => {
   if (width > height + LEGEND_MIN_WIDTH) {

package/esm/charts/core/components/chart-layout/utils/orientation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/chart-layout/utils/orientation.ts"],
-  "sourcesContent": ["import type { Orientation } from '../../../../../core/types/orientation.js';\nimport { LEGEND_POSITION } from '../../../constants.js';\nimport type { LegendPosition } from '../../../types/legend.js';\nimport { ORIENTATION } from '../types/constants.js';\n\nconst LEGEND_MIN_WIDTH = 225;\n\n/**\n * Calculates the legend orientation if its position its auto\n * @param width - Represents the parent container width\n * @param height - Represents the parent container height\n * @returns - The legend orientation\n */\nconst calculateAutoOrientation = (width: number, height: number) => {\n  if (width > height + LEGEND_MIN_WIDTH) {\n    return ORIENTATION.Horizontal;\n  }\n\n  return ORIENTATION.Vertical;\n};\n\n/**\n * Calculates the legend orientation depending of its position\n * @param position - The place the customer wants to put the legend could be one of those: bottom, right, or auto\n * @param width - Represents the parent container width\n * @param height - Represents the parent container height\n * @returns - The legend orientation\n */\nexport const getOrientation = (\n  width: number,\n  height: number,\n  position?: LegendPosition,\n) => {\n  if (position === LEGEND_POSITION.Bottom) {\n    return ORIENTATION.Vertical;\n  }\n\n  if (position === LEGEND_POSITION.Right) {\n    return ORIENTATION.Horizontal;\n  }\n\n  return calculateAutoOrientation(width, height);\n};\n\nexport const isVertical = (orientation: Orientation) =>\n  orientation === ORIENTATION.Vertical;\n\n/**\n * Returns the orientation of the legend based in the orientation of the layout.\n * @internal\n */\nexport const getLegendOrientation = (layoutOrientation: Orientation) =>\n  isVertical(layoutOrientation) ? ORIENTATION.Horizontal : ORIENTATION.Vertical;\n"],
-  "mappings": "AACA,SAAS,uBAAuB;AAEhC,SAAS,mBAAmB;AAE5B,MAAM,mBAAmB;AAQzB,MAAM,2BAA2B,CAAC,OAAe,WAAmB;AAClE,MAAI,QAAQ,SAAS,kBAAkB;AACrC,WAAO,YAAY;AAAA,EACrB;AAEA,SAAO,YAAY;AACrB;AASO,MAAM,iBAAiB,CAC5B,OACA,QACA,aACG;AACH,MAAI,aAAa,gBAAgB,QAAQ;AACvC,WAAO,YAAY;AAAA,EACrB;AAEA,MAAI,aAAa,gBAAgB,OAAO;AACtC,WAAO,YAAY;AAAA,EACrB;AAEA,SAAO,yBAAyB,OAAO,MAAM;AAC/C;AAEO,MAAM,aAAa,CAAC,gBACzB,gBAAgB,YAAY;AAMvB,MAAM,uBAAuB,CAAC,sBACnC,WAAW,iBAAiB,IAAI,YAAY,aAAa,YAAY;",
+  "sourcesContent": ["import type { Orientation } from '../../../../../core/types/orientation.js';\nimport { LEGEND_POSITION, ORIENTATION } from '../../../constants.js';\nimport type { LegendPosition } from '../../../types/legend.js';\n\nconst LEGEND_MIN_WIDTH = 225;\n\n/**\n * Calculates the legend orientation if its position its auto\n * @param width - Represents the parent container width\n * @param height - Represents the parent container height\n * @returns - The legend orientation\n */\nconst calculateAutoOrientation = (width: number, height: number) => {\n  if (width > height + LEGEND_MIN_WIDTH) {\n    return ORIENTATION.Horizontal;\n  }\n\n  return ORIENTATION.Vertical;\n};\n\n/**\n * Calculates the legend orientation depending of its position\n * @param position - The place the customer wants to put the legend could be one of those: bottom, right, or auto\n * @param width - Represents the parent container width\n * @param height - Represents the parent container height\n * @returns - The legend orientation\n */\nexport const getOrientation = (\n  width: number,\n  height: number,\n  position?: LegendPosition,\n) => {\n  if (position === LEGEND_POSITION.Bottom) {\n    return ORIENTATION.Vertical;\n  }\n\n  if (position === LEGEND_POSITION.Right) {\n    return ORIENTATION.Horizontal;\n  }\n\n  return calculateAutoOrientation(width, height);\n};\n\nexport const isVertical = (orientation: Orientation) =>\n  orientation === ORIENTATION.Vertical;\n\n/**\n * Returns the orientation of the legend based in the orientation of the layout.\n * @internal\n */\nexport const getLegendOrientation = (layoutOrientation: Orientation) =>\n  isVertical(layoutOrientation) ? ORIENTATION.Horizontal : ORIENTATION.Vertical;\n"],
+  "mappings": "AACA,SAAS,iBAAiB,mBAAmB;AAG7C,MAAM,mBAAmB;AAQzB,MAAM,2BAA2B,CAAC,OAAe,WAAmB;AAClE,MAAI,QAAQ,SAAS,kBAAkB;AACrC,WAAO,YAAY;AAAA,EACrB;AAEA,SAAO,YAAY;AACrB;AASO,MAAM,iBAAiB,CAC5B,OACA,QACA,aACG;AACH,MAAI,aAAa,gBAAgB,QAAQ;AACvC,WAAO,YAAY;AAAA,EACrB;AAEA,MAAI,aAAa,gBAAgB,OAAO;AACtC,WAAO,YAAY;AAAA,EACrB;AAEA,SAAO,yBAAyB,OAAO,MAAM;AAC/C;AAEO,MAAM,aAAa,CAAC,gBACzB,gBAAgB,YAAY;AAMvB,MAAM,uBAAuB,CAAC,sBACnC,WAAW,iBAAiB,IAAI,YAAY,aAAa,YAAY;",
   "names": []
 }

package/esm/charts/core/components/chart-layout/utils/sanitize-legend-ratio.js

@@ -1,6 +1,5 @@
 import { isNumber } from "lodash-es";
-import { defaultRatio } from "../../../constants.js";
-import { ORIENTATION } from "../types/constants.js";
+import { defaultRatio, ORIENTATION } from "../../../constants.js";
 const isInTheRange = (value, min, max) => value >= min && value <= max;
 const sanitizeLegendRatio = (legendRatio, ratioBoundaries, orientation) => {
   if (isNumber(legendRatio)) {

package/esm/charts/core/components/chart-layout/utils/sanitize-legend-ratio.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/chart-layout/utils/sanitize-legend-ratio.ts"],
-  "sourcesContent": ["import { isNumber } from 'lodash-es';\n\nimport { defaultRatio } from '../../../constants.js';\nimport { LegendRatio, ChartLegendOrientation } from '../../../types/legend.js';\nimport { ChartLayoutLegendSizes } from '../types/chart-layout.js';\nimport { ORIENTATION } from '../types/constants.js';\n\nconst isInTheRange = (value: number, min: number, max: number) =>\n  value >= min && value <= max;\n/**\n * Returns the value of the ratio sanitized.\n * @param legendRatio -\n * @param ratioBoundaries -\n * @param orientation -\n */\nexport const sanitizeLegendRatio = (\n  legendRatio: LegendRatio,\n  ratioBoundaries: ChartLayoutLegendSizes,\n  orientation: ChartLegendOrientation,\n): LegendRatio => {\n  if (isNumber(legendRatio)) {\n    const isHorizontal = orientation === ORIENTATION.Horizontal;\n    const ratioInFraction = legendRatio / 100;\n\n    const min = isHorizontal\n      ? ratioBoundaries.minWidth\n      : ratioBoundaries.minHeight;\n    const max = isHorizontal\n      ? ratioBoundaries.maxWidth\n      : ratioBoundaries.maxHeight;\n\n    return isInTheRange(ratioInFraction, min, max) ? legendRatio : defaultRatio;\n  }\n  return defaultRatio;\n};\n"],
-  "mappings": "AAAA,SAAS,gBAAgB;AAEzB,SAAS,oBAAoB;AAG7B,SAAS,mBAAmB;AAE5B,MAAM,eAAe,CAAC,OAAe,KAAa,QAChD,SAAS,OAAO,SAAS;AAOpB,MAAM,sBAAsB,CACjC,aACA,iBACA,gBACgB;AAChB,MAAI,SAAS,WAAW,GAAG;AACzB,UAAM,eAAe,gBAAgB,YAAY;AACjD,UAAM,kBAAkB,cAAc;AAEtC,UAAM,MAAM,eACR,gBAAgB,WAChB,gBAAgB;AACpB,UAAM,MAAM,eACR,gBAAgB,WAChB,gBAAgB;AAEpB,WAAO,aAAa,iBAAiB,KAAK,GAAG,IAAI,cAAc;AAAA,EACjE;AACA,SAAO;AACT;",
+  "sourcesContent": ["import { isNumber } from 'lodash-es';\n\nimport { defaultRatio, ORIENTATION } from '../../../constants.js';\nimport { LegendRatio, ChartLegendOrientation } from '../../../types/legend.js';\nimport { ChartLayoutLegendSizes } from '../types/chart-layout.js';\n\nconst isInTheRange = (value: number, min: number, max: number) =>\n  value >= min && value <= max;\n/**\n * Returns the value of the ratio sanitized.\n * @param legendRatio -\n * @param ratioBoundaries -\n * @param orientation -\n */\nexport const sanitizeLegendRatio = (\n  legendRatio: LegendRatio,\n  ratioBoundaries: ChartLayoutLegendSizes,\n  orientation: ChartLegendOrientation,\n): LegendRatio => {\n  if (isNumber(legendRatio)) {\n    const isHorizontal = orientation === ORIENTATION.Horizontal;\n    const ratioInFraction = legendRatio / 100;\n\n    const min = isHorizontal\n      ? ratioBoundaries.minWidth\n      : ratioBoundaries.minHeight;\n    const max = isHorizontal\n      ? ratioBoundaries.maxWidth\n      : ratioBoundaries.maxHeight;\n\n    return isInTheRange(ratioInFraction, min, max) ? legendRatio : defaultRatio;\n  }\n  return defaultRatio;\n};\n"],
+  "mappings": "AAAA,SAAS,gBAAgB;AAEzB,SAAS,cAAc,mBAAmB;AAI1C,MAAM,eAAe,CAAC,OAAe,KAAa,QAChD,SAAS,OAAO,SAAS;AAOpB,MAAM,sBAAsB,CACjC,aACA,iBACA,gBACgB;AAChB,MAAI,SAAS,WAAW,GAAG;AACzB,UAAM,eAAe,gBAAgB,YAAY;AACjD,UAAM,kBAAkB,cAAc;AAEtC,UAAM,MAAM,eACR,gBAAgB,WAChB,gBAAgB;AACpB,UAAM,MAAM,eACR,gBAAgB,WAChB,gBAAgB;AAEpB,WAAO,aAAa,iBAAiB,KAAK,GAAG,IAAI,cAAc;AAAA,EACjE;AACA,SAAO;AACT;",
   "names": []
 }

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

@@ -1,16 +1,16 @@
-._4pqs4v0-3-4-0 {
+._4pqs4v0-3-5-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._4pqs4v1-3-4-0 {
+._4pqs4v1-3-5-0 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._4pqs4v2-3-4-0 {
+._4pqs4v2-3-5-0 {
   align-items: center;
   justify-content: center;
 }
-._4pqs4v3-3-4-0 {
+._4pqs4v3-3-5-0 {
   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-4-0";
-var emptyText = "_4pqs4v1-3-4-0";
-var errorText = "_4pqs4v0-3-4-0";
-var wrapper = "_4pqs4v2-3-4-0";
+var container = "_4pqs4v3-3-5-0";
+var emptyText = "_4pqs4v1-3-5-0";
+var errorText = "_4pqs4v0-3-5-0";
+var wrapper = "_4pqs4v2-3-5-0";
 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-4-0';\nexport var emptyText = '_4pqs4v1-3-4-0';\nexport var errorText = '_4pqs4v0-3-4-0';\nexport var wrapper = '_4pqs4v2-3-4-0';"],
+  "sourcesContent": ["import './ChartState.css';\nexport var container = '_4pqs4v3-3-5-0';\nexport var emptyText = '_4pqs4v1-3-5-0';\nexport var errorText = '_4pqs4v0-3-5-0';\nexport var wrapper = '_4pqs4v2-3-5-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;AAChB,IAAI,YAAY;AAChB,IAAI,YAAY;AAChB,IAAI,UAAU;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._nm3s3e0-3-4-0 {
+._nm3s3e0-3-5-0 {
   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-4-0 {
+._nm3s3e1-3-5-0 {
   margin-left: -2px;
 }
-._nm3s3e2-3-4-0 {
+._nm3s3e2-3-5-0 {
   margin-left: var(--dt-spacings-size-2, 2px);
 }
-._nm3s3e3-3-4-0 {
+._nm3s3e3-3-5-0 {
   margin-top: var(--dt-spacings-size-2, 2px);
 }
-._nm3s3e4-3-4-0 {
+._nm3s3e4-3-5-0 {
   margin-top: -2px;
 }
-._nm3s3e5-3-4-0 {
+._nm3s3e5-3-5-0 {
   transform: rotate(-90deg);
   transform-origin: left bottom;
   margin-top: -2px;
 }
-._nm3s3e6-3-4-0 {
+._nm3s3e6-3-5-0 {
   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-4-0";
-var left = "_nm3s3e1-3-4-0";
-var magnifier = "_nm3s3e0-3-4-0";
+var bottom = "_nm3s3e3-3-5-0";
+var left = "_nm3s3e1-3-5-0";
+var magnifier = "_nm3s3e0-3-5-0";
 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-4-0";
-var rotatedBottomStyle = "_nm3s3e6-3-4-0";
-var rotatedTopStyle = "_nm3s3e5-3-4-0";
-var top = "_nm3s3e4-3-4-0";
+var right = "_nm3s3e2-3-5-0";
+var rotatedBottomStyle = "_nm3s3e6-3-5-0";
+var rotatedTopStyle = "_nm3s3e5-3-5-0";
+var top = "_nm3s3e4-3-5-0";
 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-4-0';\nexport var left = '_nm3s3e1-3-4-0';\nexport var magnifier = '_nm3s3e0-3-4-0';\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-4-0';\nexport var rotatedBottomStyle = '_nm3s3e6-3-4-0';\nexport var rotatedTopStyle = '_nm3s3e5-3-4-0';\nexport var top = '_nm3s3e4-3-4-0';"],
+  "sourcesContent": ["import './Magnifier.css';\nexport var bottom = '_nm3s3e3-3-5-0';\nexport var left = '_nm3s3e1-3-5-0';\nexport var magnifier = '_nm3s3e0-3-5-0';\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-5-0';\nexport var rotatedBottomStyle = '_nm3s3e6-3-5-0';\nexport var rotatedTopStyle = '_nm3s3e5-3-5-0';\nexport var top = '_nm3s3e4-3-5-0';"],
   "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/interactions-overlay/InteractionsOverlay.css

@@ -1,4 +1,4 @@
-._nfahiq0-3-4-0 {
+._nfahiq0-3-5-0 {
   position: absolute;
   width: 100%;
   height: 100%;
@@ -6,15 +6,15 @@
   left: 0;
   touch-action: none;
 }
-._nfahiq1-3-4-0 {
+._nfahiq1-3-5-0 {
   cursor: crosshair;
 }
-._nfahiq2-3-4-0 {
+._nfahiq2-3-5-0 {
   cursor: ew-resize;
 }
-._nfahiq3-3-4-0 {
+._nfahiq3-3-5-0 {
   cursor: zoom-in;
 }
-._nfahiq4-3-4-0 {
+._nfahiq4-3-5-0 {
   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-4-0", variantClassNames: { mode: { explore: "_nfahiq1-3-4-0", pan: "_nfahiq2-3-4-0", zoom: "_nfahiq3-3-4-0", zoomOut: "_nfahiq4-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
-var interactionsOverlay = "_nfahiq5-3-4-0";
+var chartEventsWrapper = _7a468({ defaultClassName: "_nfahiq0-3-5-0", variantClassNames: { mode: { explore: "_nfahiq1-3-5-0", pan: "_nfahiq2-3-5-0", zoom: "_nfahiq3-3-5-0", zoomOut: "_nfahiq4-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
+var interactionsOverlay = "_nfahiq5-3-5-0";
 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-4-0',variantClassNames:{mode:{explore:'_nfahiq1-3-4-0',pan:'_nfahiq2-3-4-0',zoom:'_nfahiq3-3-4-0',zoomOut:'_nfahiq4-3-4-0'}},defaultVariants:{},compoundVariants:[]});\nexport var interactionsOverlay = '_nfahiq5-3-4-0';"],
+  "sourcesContent": ["import './InteractionsOverlay.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var chartEventsWrapper = _7a468({defaultClassName:'_nfahiq0-3-5-0',variantClassNames:{mode:{explore:'_nfahiq1-3-5-0',pan:'_nfahiq2-3-5-0',zoom:'_nfahiq3-3-5-0',zoomOut:'_nfahiq4-3-5-0'}},defaultVariants:{},compoundVariants:[]});\nexport var interactionsOverlay = '_nfahiq5-3-5-0';"],
   "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": []
 }

package/esm/charts/core/components/interactions-overlay/utils/get-custom-context-menu-items.js

@@ -3,25 +3,31 @@ import {
   Children
 } from "react";
 import { isSlot } from "../../../../../core/utils/is-slot.js";
+import { OverlayTooltip } from "../../overlay-tooltip/OverlayTooltip.js";
 import { ChartSeriesAction } from "../../series-action/ChartSeriesAction.js";
-import {
-  ActionItem
-} from "../../tooltip/ChartTooltip/components/ActionItem/ActionItem.js";
 const renderActionItem = (item) => {
   const itemProps = {
     disabled: item.props.disabled,
-    onMouseUp: item.props.onSelect,
-    text: "",
+    onSelect: item.props.onSelect,
+    label: "",
     icon: ""
   };
   Children.forEach(item.props.children, (itemPart) => {
     if (isSlot(itemPart, ChartSeriesAction.ItemIcon)) {
       itemProps.icon = itemPart.props.children;
     } else {
-      itemProps.text = itemPart;
+      itemProps.label = itemPart;
     }
   });
-  return /* @__PURE__ */ jsx(ActionItem, { ...itemProps });
+  return /* @__PURE__ */ jsx(
+    OverlayTooltip.Action,
+    {
+      label: itemProps.label,
+      icon: itemProps.icon,
+      onSelect: itemProps.onSelect,
+      disabled: itemProps.disabled
+    }
+  );
 };
 const getCustomContextMenuItems = (customItem) => {
   let actions = [];

package/esm/charts/core/components/interactions-overlay/utils/get-custom-context-menu-items.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/interactions-overlay/utils/get-custom-context-menu-items.tsx"],
-  "sourcesContent": ["import {\n  Children,\n  type ElementType,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\n\nimport { IntentProps } from '../../../../../core/slots/Intent/Intent.js';\nimport { isSlot } from '../../../../../core/utils/is-slot.js';\nimport type { MenuItemProps } from '../../../../../navigation/menu/Item.js';\nimport { ChartSeriesAction } from '../../series-action/ChartSeriesAction.js';\nimport {\n  ActionItem,\n  ActionItemProps,\n} from '../../tooltip/ChartTooltip/components/ActionItem/ActionItem.js';\n\nconst renderActionItem = (\n  item: ReactElement<PropsWithChildren<MenuItemProps<ElementType>>>,\n) => {\n  const itemProps: ActionItemProps = {\n    disabled: item.props.disabled,\n    onMouseUp: item.props.onSelect,\n    text: '',\n    icon: '',\n  };\n\n  Children.forEach(item.props.children, (itemPart) => {\n    if (isSlot(itemPart, ChartSeriesAction.ItemIcon)) {\n      itemProps.icon = itemPart.props.children;\n    } else {\n      itemProps.text = itemPart;\n    }\n  });\n\n  return <ActionItem {...itemProps} />;\n};\n\nexport const getCustomContextMenuItems = (customItem: ReactNode) => {\n  let actions: ReactElement<PropsWithChildren<MenuItemProps<ElementType>>>[] =\n    [];\n  let intents: ReactElement<PropsWithChildren<IntentProps>>[] = [];\n\n  Children.forEach(customItem, (action) => {\n    if (isSlot(action, ChartSeriesAction)) {\n      const { actions: recursiveActions, intents: recursiveIntents } =\n        getCustomContextMenuItems(action.props.children);\n      actions = [...actions, ...recursiveActions];\n      intents = [...intents, ...recursiveIntents];\n    } else if (isSlot(action, ChartSeriesAction.Item)) {\n      actions = [...actions, renderActionItem(action)];\n    } else if (isSlot(action, ChartSeriesAction.Intent)) {\n      intents = [...intents, action];\n    }\n  });\n\n  return { actions, intents };\n};\n"],
-  "mappings": "AAmCS;AAnCT;AAAA,EACE;AAAA,OAKK;AAGP,SAAS,cAAc;AAEvB,SAAS,yBAAyB;AAClC;AAAA,EACE;AAAA,OAEK;AAEP,MAAM,mBAAmB,CACvB,SACG;AACH,QAAM,YAA6B;AAAA,IACjC,UAAU,KAAK,MAAM;AAAA,IACrB,WAAW,KAAK,MAAM;AAAA,IACtB,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AAEA,WAAS,QAAQ,KAAK,MAAM,UAAU,CAAC,aAAa;AAClD,QAAI,OAAO,UAAU,kBAAkB,QAAQ,GAAG;AAChD,gBAAU,OAAO,SAAS,MAAM;AAAA,IAClC,OAAO;AACL,gBAAU,OAAO;AAAA,IACnB;AAAA,EACF,CAAC;AAED,SAAO,oBAAC,cAAY,GAAG,WAAW;AACpC;AAEO,MAAM,4BAA4B,CAAC,eAA0B;AAClE,MAAI,UACF,CAAC;AACH,MAAI,UAA0D,CAAC;AAE/D,WAAS,QAAQ,YAAY,CAAC,WAAW;AACvC,QAAI,OAAO,QAAQ,iBAAiB,GAAG;AACrC,YAAM,EAAE,SAAS,kBAAkB,SAAS,iBAAiB,IAC3D,0BAA0B,OAAO,MAAM,QAAQ;AACjD,gBAAU,CAAC,GAAG,SAAS,GAAG,gBAAgB;AAC1C,gBAAU,CAAC,GAAG,SAAS,GAAG,gBAAgB;AAAA,IAC5C,WAAW,OAAO,QAAQ,kBAAkB,IAAI,GAAG;AACjD,gBAAU,CAAC,GAAG,SAAS,iBAAiB,MAAM,CAAC;AAAA,IACjD,WAAW,OAAO,QAAQ,kBAAkB,MAAM,GAAG;AACnD,gBAAU,CAAC,GAAG,SAAS,MAAM;AAAA,IAC/B;AAAA,EACF,CAAC;AAED,SAAO,EAAE,SAAS,QAAQ;AAC5B;",
+  "sourcesContent": ["import {\n  Children,\n  type ElementType,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\n\nimport { IntentProps } from '../../../../../core/slots/Intent/Intent.js';\nimport { isSlot } from '../../../../../core/utils/is-slot.js';\nimport type { MenuItemProps } from '../../../../../navigation/menu/Item.js';\nimport { ActionProps } from '../../overlay-tooltip/components/global-actions/Action.js';\nimport { OverlayTooltip } from '../../overlay-tooltip/OverlayTooltip.js';\nimport { ChartSeriesAction } from '../../series-action/ChartSeriesAction.js';\n\nconst renderActionItem = (\n  item: ReactElement<PropsWithChildren<MenuItemProps<ElementType>>>,\n) => {\n  const itemProps: ActionProps = {\n    disabled: item.props.disabled,\n    onSelect: item.props.onSelect,\n    label: '',\n    icon: '',\n  };\n\n  Children.forEach(item.props.children, (itemPart) => {\n    if (isSlot(itemPart, ChartSeriesAction.ItemIcon)) {\n      itemProps.icon = itemPart.props.children;\n    } else {\n      itemProps.label = itemPart;\n    }\n  });\n\n  return (\n    <OverlayTooltip.Action\n      label={itemProps.label}\n      icon={itemProps.icon}\n      onSelect={itemProps.onSelect}\n      disabled={itemProps.disabled}\n    />\n  );\n};\n\nexport const getCustomContextMenuItems = (customItem: ReactNode) => {\n  let actions: ReactElement<PropsWithChildren<MenuItemProps<ElementType>>>[] =\n    [];\n  let intents: ReactElement<PropsWithChildren<IntentProps>>[] = [];\n\n  Children.forEach(customItem, (action) => {\n    if (isSlot(action, ChartSeriesAction)) {\n      const { actions: recursiveActions, intents: recursiveIntents } =\n        getCustomContextMenuItems(action.props.children);\n      actions = [...actions, ...recursiveActions];\n      intents = [...intents, ...recursiveIntents];\n    } else if (isSlot(action, ChartSeriesAction.Item)) {\n      actions = [...actions, renderActionItem(action)];\n    } else if (isSlot(action, ChartSeriesAction.Intent)) {\n      intents = [...intents, action];\n    }\n  });\n\n  return { actions, intents };\n};\n"],
+  "mappings": "AAkCI;AAlCJ;AAAA,EACE;AAAA,OAKK;AAGP,SAAS,cAAc;AAGvB,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AAElC,MAAM,mBAAmB,CACvB,SACG;AACH,QAAM,YAAyB;AAAA,IAC7B,UAAU,KAAK,MAAM;AAAA,IACrB,UAAU,KAAK,MAAM;AAAA,IACrB,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAEA,WAAS,QAAQ,KAAK,MAAM,UAAU,CAAC,aAAa;AAClD,QAAI,OAAO,UAAU,kBAAkB,QAAQ,GAAG;AAChD,gBAAU,OAAO,SAAS,MAAM;AAAA,IAClC,OAAO;AACL,gBAAU,QAAQ;AAAA,IACpB;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC,OAAO,UAAU;AAAA,MACjB,MAAM,UAAU;AAAA,MAChB,UAAU,UAAU;AAAA,MACpB,UAAU,UAAU;AAAA;AAAA,EACtB;AAEJ;AAEO,MAAM,4BAA4B,CAAC,eAA0B;AAClE,MAAI,UACF,CAAC;AACH,MAAI,UAA0D,CAAC;AAE/D,WAAS,QAAQ,YAAY,CAAC,WAAW;AACvC,QAAI,OAAO,QAAQ,iBAAiB,GAAG;AACrC,YAAM,EAAE,SAAS,kBAAkB,SAAS,iBAAiB,IAC3D,0BAA0B,OAAO,MAAM,QAAQ;AACjD,gBAAU,CAAC,GAAG,SAAS,GAAG,gBAAgB;AAC1C,gBAAU,CAAC,GAAG,SAAS,GAAG,gBAAgB;AAAA,IAC5C,WAAW,OAAO,QAAQ,kBAAkB,IAAI,GAAG;AACjD,gBAAU,CAAC,GAAG,SAAS,iBAAiB,MAAM,CAAC;AAAA,IACjD,WAAW,OAAO,QAAQ,kBAAkB,MAAM,GAAG;AACnD,gBAAU,CAAC,GAAG,SAAS,MAAM;AAAA,IAC/B;AAAA,EACF,CAAC;AAED,SAAO,EAAE,SAAS,QAAQ;AAC5B;",
   "names": []
 }

package/esm/charts/core/components/legend/categorical/ChartLegend.css

@@ -1,4 +1,4 @@
-._9x5f9b0-3-4-0 {
+._9x5f9b0-3-5-0 {
   display: flex;
   align-items: center;
   width: 100%;