@dynatrace/strato-components 3.7.0 → 3.8.0

package/esm/charts/pie/components/PieChartPlot/PieChartPlot.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/pie/components/PieChartPlot/PieChartPlot.css.ts"],
-  "sourcesContent": ["import './PieChartPlot.css';\nexport var container = '_1iotdmn0-3-7-0';"],
+  "sourcesContent": ["import './PieChartPlot.css';\nexport var container = '_1iotdmn0-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

package/esm/charts/pie/components/PieChartSlice.js

@@ -6,19 +6,23 @@ const PieChartSlice = (props) => {
   const { sliceId, arc, data, path, isHighlighted } = props;
   const arcPath = path(arc);
   const formatter = useFormatter();
-  const { onMouseClickHandler, onPointerMoveHandler } = useSliceHandlers(
-    sliceId,
-    data,
-    formatter
-  );
-  return /* @__PURE__ */ jsx("g", { onPointerMove: onPointerMoveHandler, onClick: onMouseClickHandler, children: /* @__PURE__ */ jsx(
-    "path",
+  const { onMouseClickHandler, onPointerMoveHandler, onTouchEndHandler } = useSliceHandlers(sliceId, data, formatter);
+  return /* @__PURE__ */ jsx(
+    "g",
     {
-      d: arcPath || "",
-      fill: data.color.Default,
-      opacity: isHighlighted ? 0.85 : INACTIVE_FILL_OPACITY_PIE_CHART
+      onPointerMove: onPointerMoveHandler,
+      onClick: onMouseClickHandler,
+      onTouchEnd: onTouchEndHandler,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: arcPath || "",
+          fill: data.color.Default,
+          opacity: isHighlighted ? 0.85 : INACTIVE_FILL_OPACITY_PIE_CHART
+        }
+      )
     }
-  ) });
+  );
 };
 PieChartSlice["displayName"] = "PieChartSlice";
 export {

package/esm/charts/pie/components/PieChartSlice.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/pie/components/PieChartSlice.tsx"],
-  "sourcesContent": ["import type { Arc, PieArcDatum } from 'd3-shape';\n\nimport { INACTIVE_FILL_OPACITY_PIE_CHART } from '../../core/constants.js';\nimport { useFormatter } from '../context/FormatterContext.js';\nimport { useSliceHandlers } from '../hooks/useSliceHandlers.js';\nimport { InternalSliceData } from '../types/internal/pie-chart.js';\n\nexport interface PieSliceProps {\n  sliceId: string;\n  arc: PieArcDatum<InternalSliceData>;\n  data: InternalSliceData;\n  path: Arc<unknown, PieArcDatum<InternalSliceData>>;\n  isHighlighted: boolean;\n}\n\nexport const PieChartSlice = (props: PieSliceProps) => {\n  const { sliceId, arc, data, path, isHighlighted } = props;\n  const arcPath = path(arc);\n  const formatter = useFormatter();\n  const { onMouseClickHandler, onPointerMoveHandler } = useSliceHandlers(\n    sliceId,\n    data,\n    formatter,\n  );\n\n  return (\n    <g onPointerMove={onPointerMoveHandler} onClick={onMouseClickHandler}>\n      <path\n        d={arcPath || ''}\n        fill={data.color.Default}\n        opacity={isHighlighted ? 0.85 : INACTIVE_FILL_OPACITY_PIE_CHART}\n      />\n    </g>\n  );\n};\nPieChartSlice['displayName'] = 'PieChartSlice';\n"],
-  "mappings": "AA2BM;AAzBN,SAAS,uCAAuC;AAChD,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AAW1B,MAAM,gBAAgB,CAAC,UAAyB;AACrD,QAAM,EAAE,SAAS,KAAK,MAAM,MAAM,cAAc,IAAI;AACpD,QAAM,UAAU,KAAK,GAAG;AACxB,QAAM,YAAY,aAAa;AAC/B,QAAM,EAAE,qBAAqB,qBAAqB,IAAI;AAAA,IACpD;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SACE,oBAAC,OAAE,eAAe,sBAAsB,SAAS,qBAC/C;AAAA,IAAC;AAAA;AAAA,MACC,GAAG,WAAW;AAAA,MACd,MAAM,KAAK,MAAM;AAAA,MACjB,SAAS,gBAAgB,OAAO;AAAA;AAAA,EAClC,GACF;AAEJ;AACA,cAAc,aAAa,IAAI;",
+  "sourcesContent": ["import type { Arc, PieArcDatum } from 'd3-shape';\n\nimport { INACTIVE_FILL_OPACITY_PIE_CHART } from '../../core/constants.js';\nimport { useFormatter } from '../context/FormatterContext.js';\nimport { useSliceHandlers } from '../hooks/useSliceHandlers.js';\nimport { InternalSliceData } from '../types/internal/pie-chart.js';\n\nexport interface PieSliceProps {\n  sliceId: string;\n  arc: PieArcDatum<InternalSliceData>;\n  data: InternalSliceData;\n  path: Arc<unknown, PieArcDatum<InternalSliceData>>;\n  isHighlighted: boolean;\n}\n\nexport const PieChartSlice = (props: PieSliceProps) => {\n  const { sliceId, arc, data, path, isHighlighted } = props;\n  const arcPath = path(arc);\n  const formatter = useFormatter();\n  const { onMouseClickHandler, onPointerMoveHandler, onTouchEndHandler } =\n    useSliceHandlers(sliceId, data, formatter);\n\n  return (\n    <g\n      onPointerMove={onPointerMoveHandler}\n      onClick={onMouseClickHandler}\n      onTouchEnd={onTouchEndHandler}\n    >\n      <path\n        d={arcPath || ''}\n        fill={data.color.Default}\n        opacity={isHighlighted ? 0.85 : INACTIVE_FILL_OPACITY_PIE_CHART}\n      />\n    </g>\n  );\n};\nPieChartSlice['displayName'] = 'PieChartSlice';\n"],
+  "mappings": "AA4BM;AA1BN,SAAS,uCAAuC;AAChD,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AAW1B,MAAM,gBAAgB,CAAC,UAAyB;AACrD,QAAM,EAAE,SAAS,KAAK,MAAM,MAAM,cAAc,IAAI;AACpD,QAAM,UAAU,KAAK,GAAG;AACxB,QAAM,YAAY,aAAa;AAC/B,QAAM,EAAE,qBAAqB,sBAAsB,kBAAkB,IACnE,iBAAiB,SAAS,MAAM,SAAS;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAe;AAAA,MACf,SAAS;AAAA,MACT,YAAY;AAAA,MAEZ;AAAA,QAAC;AAAA;AAAA,UACC,GAAG,WAAW;AAAA,UACd,MAAM,KAAK,MAAM;AAAA,UACjB,SAAS,gBAAgB,OAAO;AAAA;AAAA,MAClC;AAAA;AAAA,EACF;AAEJ;AACA,cAAc,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/pie/constants.js

@@ -25,6 +25,7 @@ const DEFAULT_SCALE_FALLBACK_COLOR = SCALE_FALLBACK_COLOR;
 const DONUT_CHART_ARIA_LABEL = "Donut Chart";
 const PIE_CHART_ARIA_LABEL = "Pie Chart";
 const PAD_ANGLE = 0.01;
+const THINNER_SLICES_ID = "thinner-slices";
 export {
   CHART_VARIANT,
   DEFAULT_SCALE_FALLBACK_COLOR,
@@ -34,6 +35,7 @@ export {
   PAD_ANGLE,
   PIE_CHART_ARIA_LABEL,
   PIE_CHART_DISPLAY_NAME,
+  THINNER_SLICES_ID,
   THRESHOLD_TYPE_OPTION,
   TRUNCATION_MODE
 };

package/esm/charts/pie/constants.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/pie/constants.ts"],
-  "sourcesContent": ["\nimport type { ChartVariant } from './types/internal/pie-chart.js';\nimport type {\n  LabelTypeOptions,\n  ThresholdType,\n} from './types/pie-chart.config.js';\nimport type { TruncationMode } from '../../typography/text-ellipsis/TextEllipsis.js';\nimport { SCALE_FALLBACK_COLOR } from '../core/constants.js';\nimport { MappedObject } from '../core/types/helpers/mapped-object.js';\n\nexport const DONUT_CHART_DISPLAY_NAME = 'DonutChart';\nexport const PIE_CHART_DISPLAY_NAME = 'PieChart';\n\nexport const CHART_VARIANT = Object.freeze<MappedObject<ChartVariant>>({\n  Donut: 'donut',\n  Pie: 'pie',\n});\n\nexport const THRESHOLD_TYPE_OPTION = Object.freeze<MappedObject<ThresholdType>>(\n  {\n    Absolute: 'absolute',\n    NumberOfSlices: 'number-of-slices',\n    Relative: 'relative',\n  },\n);\n\nexport const TRUNCATION_MODE = Object.freeze<MappedObject<TruncationMode>>({\n  End: 'end',\n  Middle: 'middle',\n  Start: 'start',\n});\n\nexport const LABEL_TYPE_OPTION = Object.freeze<MappedObject<LabelTypeOptions>>({\n  Absolute: 'absolute',\n  Relative: 'relative',\n});\n\nexport const DEFAULT_SCALE_FALLBACK_COLOR = SCALE_FALLBACK_COLOR;\n\nexport const DONUT_CHART_ARIA_LABEL = 'Donut Chart';\nexport const PIE_CHART_ARIA_LABEL = 'Pie Chart';\nexport const PAD_ANGLE = 0.01;\n"],
-  "mappings": "AAOA,SAAS,4BAA4B;AAG9B,MAAM,2BAA2B;AACjC,MAAM,yBAAyB;AAE/B,MAAM,gBAAgB,OAAO,OAAmC;AAAA,EACrE,OAAO;AAAA,EACP,KAAK;AACP,CAAC;AAEM,MAAM,wBAAwB,OAAO;AAAA,EAC1C;AAAA,IACE,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,UAAU;AAAA,EACZ;AACF;AAEO,MAAM,kBAAkB,OAAO,OAAqC;AAAA,EACzE,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,OAAO;AACT,CAAC;AAEM,MAAM,oBAAoB,OAAO,OAAuC;AAAA,EAC7E,UAAU;AAAA,EACV,UAAU;AACZ,CAAC;AAEM,MAAM,+BAA+B;AAErC,MAAM,yBAAyB;AAC/B,MAAM,uBAAuB;AAC7B,MAAM,YAAY;",
+  "sourcesContent": ["import type { ChartVariant } from './types/internal/pie-chart.js';\nimport type {\n  LabelTypeOptions,\n  ThresholdType,\n} from './types/pie-chart.config.js';\nimport type { TruncationMode } from '../../typography/text-ellipsis/TextEllipsis.js';\nimport { SCALE_FALLBACK_COLOR } from '../core/constants.js';\nimport { MappedObject } from '../core/types/helpers/mapped-object.js';\n\nexport const DONUT_CHART_DISPLAY_NAME = 'DonutChart';\nexport const PIE_CHART_DISPLAY_NAME = 'PieChart';\n\nexport const CHART_VARIANT = Object.freeze<MappedObject<ChartVariant>>({\n  Donut: 'donut',\n  Pie: 'pie',\n});\n\nexport const THRESHOLD_TYPE_OPTION = Object.freeze<MappedObject<ThresholdType>>(\n  {\n    Absolute: 'absolute',\n    NumberOfSlices: 'number-of-slices',\n    Relative: 'relative',\n  },\n);\n\nexport const TRUNCATION_MODE = Object.freeze<MappedObject<TruncationMode>>({\n  End: 'end',\n  Middle: 'middle',\n  Start: 'start',\n});\n\nexport const LABEL_TYPE_OPTION = Object.freeze<MappedObject<LabelTypeOptions>>({\n  Absolute: 'absolute',\n  Relative: 'relative',\n});\n\nexport const DEFAULT_SCALE_FALLBACK_COLOR = SCALE_FALLBACK_COLOR;\n\nexport const DONUT_CHART_ARIA_LABEL = 'Donut Chart';\nexport const PIE_CHART_ARIA_LABEL = 'Pie Chart';\nexport const PAD_ANGLE = 0.01;\n\nexport const THINNER_SLICES_ID = 'thinner-slices';\n"],
+  "mappings": "AAMA,SAAS,4BAA4B;AAG9B,MAAM,2BAA2B;AACjC,MAAM,yBAAyB;AAE/B,MAAM,gBAAgB,OAAO,OAAmC;AAAA,EACrE,OAAO;AAAA,EACP,KAAK;AACP,CAAC;AAEM,MAAM,wBAAwB,OAAO;AAAA,EAC1C;AAAA,IACE,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,UAAU;AAAA,EACZ;AACF;AAEO,MAAM,kBAAkB,OAAO,OAAqC;AAAA,EACzE,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,OAAO;AACT,CAAC;AAEM,MAAM,oBAAoB,OAAO,OAAuC;AAAA,EAC7E,UAAU;AAAA,EACV,UAAU;AACZ,CAAC;AAEM,MAAM,+BAA+B;AAErC,MAAM,yBAAyB;AAC/B,MAAM,uBAAuB;AAC7B,MAAM,YAAY;AAElB,MAAM,oBAAoB;",
   "names": []
 }

package/esm/charts/pie/context/ChartConfigContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/pie/context/ChartConfigContext.ts"],
-  "sourcesContent": ["import { createContext } from 'react';\n\nimport type { PieChartContextConfig } from '../types/pie-chart.config.js';\n\n/**\n * @internal\n */\nexport const PieChartConfigContext = createContext<\n  PieChartContextConfig | string\n>({});\n\n/**\n * Provider for the PieChart API config that can be shared across charts\n * @public\n */\nexport const PieChartConfig = PieChartConfigContext.Provider;\n/**\n * @public\n */\nexport const DonutChartConfig = PieChartConfig;\n"],
-  "mappings": "AAAA,SAAS,qBAAqB;AAOvB,MAAM,wBAAwB,cAEnC,CAAC,CAAC;AAMG,MAAM,iBAAiB,sBAAsB;AAI7C,MAAM,mBAAmB;",
+  "sourcesContent": ["import { createContext } from 'react';\n\nimport type { PieChartContextConfig } from '../types/pie-chart.config.js';\n\n/**\n * @internal\n */\nexport const PieChartConfigContext = createContext<\n  PieChartContextConfig | string\n>({});\n\n/**\n * Provider for the PieChart API config that can be shared across charts\n * @public\n */\nexport const PieChartConfig = PieChartConfigContext.Provider;\n/**\n * Provider for the DonutChart API config that can be shared across charts.\n * @public\n */\nexport const DonutChartConfig = PieChartConfig;\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAOvB,MAAM,wBAAwB,cAEnC,CAAC,CAAC;AAMG,MAAM,iBAAiB,sBAAsB;AAK7C,MAAM,mBAAmB;",
   "names": []
 }

package/esm/charts/pie/context/PieChartRawDataContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/pie/context/PieChartRawDataContext.ts"],
-  "sourcesContent": ["import { createContext, useContext } from 'react';\n\nimport { PieChartData } from '../types/pie-chart.config.js';\n\nexport type PieRawDataContext = PieChartData;\n\nexport const PieChartRawDataContext = createContext<PieRawDataContext>({\n  slices: [],\n});\n\nexport const usePieChartRawData = () => useContext(PieChartRawDataContext);\n"],
-  "mappings": "AAAA,SAAS,eAAe,kBAAkB;AAMnC,MAAM,yBAAyB,cAAiC;AAAA,EACrE,QAAQ,CAAC;AACX,CAAC;AAEM,MAAM,qBAAqB,MAAM,WAAW,sBAAsB;",
+  "sourcesContent": ["import { createContext, useContext } from 'react';\n\nimport { PieChartData } from '../types/pie-chart.config.js';\n\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport type PieRawDataContext = PieChartData;\n\nexport const PieChartRawDataContext = createContext<PieRawDataContext>({\n  slices: [],\n});\n\nexport const usePieChartRawData = () => useContext(PieChartRawDataContext);\n"],
+  "mappings": "AAAA,SAAS,eAAe,kBAAkB;AAOnC,MAAM,yBAAyB,cAAiC;AAAA,EACrE,QAAQ,CAAC;AACX,CAAC;AAEM,MAAM,qBAAqB,MAAM,WAAW,sBAAsB;",
   "names": []
 }

package/esm/charts/pie/hooks/useNormalizedPieData.js

@@ -0,0 +1,20 @@
+import { isEmpty } from "lodash-es";
+import { useMemo } from "react";
+import { normalizePieData } from "../utils/normalize-pie-data.js";
+function useNormalizedPieData({
+  data,
+  labelAccessor,
+  valueAccessor,
+  unit
+}) {
+  const normalizedData = useMemo(
+    () => normalizePieData({ data, labelAccessor, valueAccessor, unit }),
+    [data, labelAccessor, valueAccessor, unit]
+  );
+  const isDataAvailable = normalizedData.slices !== void 0 ? !isEmpty(normalizedData.slices) : !isEmpty(data);
+  return { normalizedData, isDataAvailable };
+}
+export {
+  useNormalizedPieData
+};
+//# sourceMappingURL=useNormalizedPieData.js.map

package/esm/charts/pie/hooks/useNormalizedPieData.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/pie/hooks/useNormalizedPieData.ts"],
+  "sourcesContent": ["import { isEmpty } from 'lodash-es';\nimport { useMemo } from 'react';\n\nimport { normalizePieData } from '../utils/normalize-pie-data.js';\nimport type { NormalizePieDataInput } from '../utils/normalize-pie-data.js';\n\nexport interface NormalizedPieData {\n  normalizedData: ReturnType<typeof normalizePieData>;\n  isDataAvailable: boolean;\n}\n\nexport function useNormalizedPieData({\n  data,\n  labelAccessor,\n  valueAccessor,\n  unit,\n}: NormalizePieDataInput): NormalizedPieData {\n  const normalizedData = useMemo(\n    () => normalizePieData({ data, labelAccessor, valueAccessor, unit }),\n    [data, labelAccessor, valueAccessor, unit],\n  );\n\n  const isDataAvailable =\n    normalizedData.slices !== undefined\n      ? !isEmpty(normalizedData.slices)\n      : !isEmpty(data);\n\n  return { normalizedData, isDataAvailable };\n}\n"],
+  "mappings": "AAAA,SAAS,eAAe;AACxB,SAAS,eAAe;AAExB,SAAS,wBAAwB;AAQ1B,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA6C;AAC3C,QAAM,iBAAiB;AAAA,IACrB,MAAM,iBAAiB,EAAE,MAAM,eAAe,eAAe,KAAK,CAAC;AAAA,IACnE,CAAC,MAAM,eAAe,eAAe,IAAI;AAAA,EAC3C;AAEA,QAAM,kBACJ,eAAe,WAAW,SACtB,CAAC,QAAQ,eAAe,MAAM,IAC9B,CAAC,QAAQ,IAAI;AAEnB,SAAO,EAAE,gBAAgB,gBAAgB;AAC3C;",
+  "names": []
+}

package/esm/charts/pie/hooks/useOverlayHandlers.js

@@ -1,15 +1,17 @@
 import { useSetOverlayState } from "./store/use-set-overlay-state.js";
 const useOverlayHandlers = () => {
   const { setOverlayStateInBounds } = useSetOverlayState();
-  const onMouseEnterHandler = () => {
+  const onPointerEnterHandler = () => {
     setOverlayStateInBounds(true);
   };
-  const onMouseLeaveHandler = () => {
-    setOverlayStateInBounds(false);
+  const onPointerLeaveHandler = (event) => {
+    if (event.pointerType !== "touch") {
+      setOverlayStateInBounds(false);
+    }
   };
   return {
-    onMouseEnterHandler,
-    onMouseLeaveHandler
+    onPointerEnterHandler,
+    onPointerLeaveHandler
   };
 };
 export {

package/esm/charts/pie/hooks/useOverlayHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/pie/hooks/useOverlayHandlers.ts"],
-  "sourcesContent": ["import { useSetOverlayState } from './store/use-set-overlay-state.js';\n\nexport const useOverlayHandlers = () => {\n  const { setOverlayStateInBounds } = useSetOverlayState();\n\n  const onMouseEnterHandler = () => {\n    setOverlayStateInBounds(true);\n  };\n\n  const onMouseLeaveHandler = () => {\n    setOverlayStateInBounds(false);\n  };\n\n  return {\n    onMouseEnterHandler,\n    onMouseLeaveHandler,\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,0BAA0B;AAE5B,MAAM,qBAAqB,MAAM;AACtC,QAAM,EAAE,wBAAwB,IAAI,mBAAmB;AAEvD,QAAM,sBAAsB,MAAM;AAChC,4BAAwB,IAAI;AAAA,EAC9B;AAEA,QAAM,sBAAsB,MAAM;AAChC,4BAAwB,KAAK;AAAA,EAC/B;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import type { PointerEvent as ReactPointerEvent } from 'react';\n\nimport { useSetOverlayState } from './store/use-set-overlay-state.js';\n\nexport const useOverlayHandlers = () => {\n  const { setOverlayStateInBounds } = useSetOverlayState();\n\n  const onPointerEnterHandler = () => {\n    setOverlayStateInBounds(true);\n  };\n\n  const onPointerLeaveHandler = (event: ReactPointerEvent) => {\n    if (event.pointerType !== 'touch') {\n      setOverlayStateInBounds(false);\n    }\n  };\n\n  return {\n    onPointerEnterHandler,\n    onPointerLeaveHandler,\n  };\n};\n"],
+  "mappings": "AAEA,SAAS,0BAA0B;AAE5B,MAAM,qBAAqB,MAAM;AACtC,QAAM,EAAE,wBAAwB,IAAI,mBAAmB;AAEvD,QAAM,wBAAwB,MAAM;AAClC,4BAAwB,IAAI;AAAA,EAC9B;AAEA,QAAM,wBAAwB,CAAC,UAA6B;AAC1D,QAAI,MAAM,gBAAgB,SAAS;AACjC,8BAAwB,KAAK;AAAA,IAC/B;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/charts/pie/hooks/useSliceHandlers.js

@@ -1,6 +1,7 @@
 import { useTooltip } from "../../core/components/overlay-tooltip/contexts/TooltipContext.js";
 import { useTooltipActions } from "../../core/components/overlay-tooltip/useTooltipActions.js";
 import { useEventErrorHandler } from "../../core/hooks/useEventErrorHandler.js";
+import { THINNER_SLICES_ID } from "../constants.js";
 import { getTooltipContent } from "../utils/get-tooltip-content.js";
 const buildTooltipData = (sliceId, data, handlerCatch, formatter) => {
   const tooltipContent = getTooltipContent(
@@ -30,7 +31,7 @@ function useSliceHandlers(sliceId, data, formatter) {
   const tooltipState = useTooltip();
   const { hover, pin, unpin, reset } = useTooltipActions();
   const onPointerMoveHandler = (event) => {
-    if (tooltipState.getState().pinned || sliceId === "slice-thinner-slices") {
+    if (tooltipState.getState().pinned || sliceId === `slice-${THINNER_SLICES_ID}`) {
       return;
     }
     const tooltipData = buildTooltipData(
@@ -43,7 +44,7 @@ function useSliceHandlers(sliceId, data, formatter) {
   };
   const onMouseClickHandler = (event) => {
     event.stopPropagation();
-    if (sliceId === "slice-thinner-slices") {
+    if (sliceId === `slice-${THINNER_SLICES_ID}`) {
       reset();
     } else {
       const tooltipData = buildTooltipData(
@@ -60,9 +61,34 @@ function useSliceHandlers(sliceId, data, formatter) {
       }
     }
   };
+  const onTouchEndHandler = (event) => {
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+    if (sliceId === `slice-${THINNER_SLICES_ID}`) {
+      reset();
+      return;
+    }
+    const touch = event.changedTouches[0];
+    if (!touch) {
+      return;
+    }
+    const tooltipData = buildTooltipData(
+      sliceId,
+      data,
+      handlerCatch,
+      formatter
+    );
+    if (tooltipState.getState().pinned) {
+      unpin();
+    } else {
+      pin({ clientX: touch.clientX, clientY: touch.clientY }, tooltipData);
+    }
+  };
   return {
     onPointerMoveHandler,
-    onMouseClickHandler
+    onMouseClickHandler,
+    onTouchEndHandler
   };
 }
 export {

package/esm/charts/pie/hooks/useSliceHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/pie/hooks/useSliceHandlers.ts"],
-  "sourcesContent": ["import { MouseEvent as ReactMouseEvent } from 'react';\n\nimport { useTooltip } from '../../core/components/overlay-tooltip/contexts/TooltipContext.js';\nimport type { Data } from '../../core/components/overlay-tooltip/types.js';\nimport { useTooltipActions } from '../../core/components/overlay-tooltip/useTooltipActions.js';\nimport { useEventErrorHandler } from '../../core/hooks/useEventErrorHandler.js';\nimport type { Formatter } from '../../core/types/formatter.js';\nimport type { InternalSliceData } from '../types/internal/pie-chart.js';\nimport { getTooltipContent } from '../utils/get-tooltip-content.js';\n\nconst buildTooltipData = (\n  sliceId: string,\n  data: InternalSliceData,\n  handlerCatch: (callback: unknown) => number,\n  formatter: Formatter,\n): Data => {\n  const tooltipContent = getTooltipContent(\n    sliceId,\n    data,\n    handlerCatch,\n    formatter,\n  );\n\n  return {\n    metadata: {\n      sliceId: data.id,\n    },\n    geometry: 'pie',\n    series: [\n      {\n        name: tooltipContent.name,\n        value: tooltipContent.absoluteValue,\n        color: tooltipContent.color,\n        relativeValue: tooltipContent.relativeValue,\n        relativeValueUnit: '%',\n      },\n    ],\n  };\n};\n\n/**\n * Hook that generates handlers for mouse interactions.\n * @param sliceId - Id of the slice.\n * @param data - Slice data for this slice.\n * @param formatter - Formatter to be used.\n * @returns Handlers to perform mouse interactions.\n */\nexport function useSliceHandlers(\n  sliceId: string,\n  data: InternalSliceData,\n  formatter: Formatter,\n) {\n  const handlerCatch = useEventErrorHandler();\n  const tooltipState = useTooltip();\n  const { hover, pin, unpin, reset } = useTooltipActions();\n\n  const onPointerMoveHandler = (event: ReactMouseEvent) => {\n    if (tooltipState.getState().pinned || sliceId === 'slice-thinner-slices') {\n      return;\n    }\n\n    const tooltipData = buildTooltipData(\n      sliceId,\n      data,\n      handlerCatch,\n      formatter,\n    );\n\n    hover(event, tooltipData);\n  };\n\n  const onMouseClickHandler = (event: ReactMouseEvent) => {\n    event.stopPropagation();\n\n    if (sliceId === 'slice-thinner-slices') {\n      reset();\n    } else {\n      const tooltipData = buildTooltipData(\n        sliceId,\n        data,\n        handlerCatch,\n        formatter,\n      );\n\n      if (tooltipState.getState().pinned) {\n        unpin();\n        hover(event, tooltipData);\n      } else {\n        pin(event, tooltipData);\n      }\n    }\n  };\n\n  return {\n    onPointerMoveHandler,\n    onMouseClickHandler,\n  };\n}\n"],
-  "mappings": "AAEA,SAAS,kBAAkB;AAE3B,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AAGrC,SAAS,yBAAyB;AAElC,MAAM,mBAAmB,CACvB,SACA,MACA,cACA,cACS;AACT,QAAM,iBAAiB;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SAAO;AAAA,IACL,UAAU;AAAA,MACR,SAAS,KAAK;AAAA,IAChB;AAAA,IACA,UAAU;AAAA,IACV,QAAQ;AAAA,MACN;AAAA,QACE,MAAM,eAAe;AAAA,QACrB,OAAO,eAAe;AAAA,QACtB,OAAO,eAAe;AAAA,QACtB,eAAe,eAAe;AAAA,QAC9B,mBAAmB;AAAA,MACrB;AAAA,IACF;AAAA,EACF;AACF;AASO,SAAS,iBACd,SACA,MACA,WACA;AACA,QAAM,eAAe,qBAAqB;AAC1C,QAAM,eAAe,WAAW;AAChC,QAAM,EAAE,OAAO,KAAK,OAAO,MAAM,IAAI,kBAAkB;AAEvD,QAAM,uBAAuB,CAAC,UAA2B;AACvD,QAAI,aAAa,SAAS,EAAE,UAAU,YAAY,wBAAwB;AACxE;AAAA,IACF;AAEA,UAAM,cAAc;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,UAAM,OAAO,WAAW;AAAA,EAC1B;AAEA,QAAM,sBAAsB,CAAC,UAA2B;AACtD,UAAM,gBAAgB;AAEtB,QAAI,YAAY,wBAAwB;AACtC,YAAM;AAAA,IACR,OAAO;AACL,YAAM,cAAc;AAAA,QAClB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAEA,UAAI,aAAa,SAAS,EAAE,QAAQ;AAClC,cAAM;AACN,cAAM,OAAO,WAAW;AAAA,MAC1B,OAAO;AACL,YAAI,OAAO,WAAW;AAAA,MACxB;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import type {\n  MouseEvent as ReactMouseEvent,\n  TouchEvent as ReactTouchEvent,\n} from 'react';\n\nimport { useTooltip } from '../../core/components/overlay-tooltip/contexts/TooltipContext.js';\nimport type { Data } from '../../core/components/overlay-tooltip/types.js';\nimport { useTooltipActions } from '../../core/components/overlay-tooltip/useTooltipActions.js';\nimport { useEventErrorHandler } from '../../core/hooks/useEventErrorHandler.js';\nimport type { Formatter } from '../../core/types/formatter.js';\nimport { THINNER_SLICES_ID } from '../constants.js';\nimport type { InternalSliceData } from '../types/internal/pie-chart.js';\nimport { getTooltipContent } from '../utils/get-tooltip-content.js';\n\nconst buildTooltipData = (\n  sliceId: string,\n  data: InternalSliceData,\n  handlerCatch: (callback: unknown) => number,\n  formatter: Formatter,\n): Data => {\n  const tooltipContent = getTooltipContent(\n    sliceId,\n    data,\n    handlerCatch,\n    formatter,\n  );\n\n  return {\n    metadata: {\n      sliceId: data.id,\n    },\n    geometry: 'pie',\n    series: [\n      {\n        name: tooltipContent.name,\n        value: tooltipContent.absoluteValue,\n        color: tooltipContent.color,\n        relativeValue: tooltipContent.relativeValue,\n        relativeValueUnit: '%',\n      },\n    ],\n  };\n};\n\n/**\n * Hook that generates handlers for mouse and touch interactions.\n * @param sliceId - Id of the slice.\n * @param data - Slice data for this slice.\n * @param formatter - Formatter to be used.\n * @returns Handlers to perform mouse and touch interactions.\n */\nexport function useSliceHandlers(\n  sliceId: string,\n  data: InternalSliceData,\n  formatter: Formatter,\n) {\n  const handlerCatch = useEventErrorHandler();\n  const tooltipState = useTooltip();\n  const { hover, pin, unpin, reset } = useTooltipActions();\n\n  const onPointerMoveHandler = (event: ReactMouseEvent) => {\n    if (\n      tooltipState.getState().pinned ||\n      sliceId === `slice-${THINNER_SLICES_ID}`\n    ) {\n      return;\n    }\n\n    const tooltipData = buildTooltipData(\n      sliceId,\n      data,\n      handlerCatch,\n      formatter,\n    );\n\n    hover(event, tooltipData);\n  };\n\n  const onMouseClickHandler = (event: ReactMouseEvent) => {\n    event.stopPropagation();\n\n    if (sliceId === `slice-${THINNER_SLICES_ID}`) {\n      reset();\n    } else {\n      const tooltipData = buildTooltipData(\n        sliceId,\n        data,\n        handlerCatch,\n        formatter,\n      );\n\n      if (tooltipState.getState().pinned) {\n        unpin();\n        hover(event, tooltipData);\n      } else {\n        pin(event, tooltipData);\n      }\n    }\n  };\n\n  // Handles tooltip pin/unpin on touch. Fires before the browser's synthetic click\n  // so the pinned state is established before iOS can suppress that click event.\n  // Calling preventDefault() suppresses the subsequent synthetic click so onClick\n  // does not double-fire.\n  const onTouchEndHandler = (event: ReactTouchEvent) => {\n    if (event.cancelable) {\n      event.preventDefault();\n    }\n\n    if (sliceId === `slice-${THINNER_SLICES_ID}`) {\n      reset();\n      return;\n    }\n\n    const touch = event.changedTouches[0];\n    if (!touch) {\n      return;\n    }\n\n    const tooltipData = buildTooltipData(\n      sliceId,\n      data,\n      handlerCatch,\n      formatter,\n    );\n\n    if (tooltipState.getState().pinned) {\n      unpin();\n    } else {\n      pin({ clientX: touch.clientX, clientY: touch.clientY }, tooltipData);\n    }\n  };\n\n  return {\n    onPointerMoveHandler,\n    onMouseClickHandler,\n    onTouchEndHandler,\n  };\n}\n"],
+  "mappings": "AAKA,SAAS,kBAAkB;AAE3B,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AAErC,SAAS,yBAAyB;AAElC,SAAS,yBAAyB;AAElC,MAAM,mBAAmB,CACvB,SACA,MACA,cACA,cACS;AACT,QAAM,iBAAiB;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SAAO;AAAA,IACL,UAAU;AAAA,MACR,SAAS,KAAK;AAAA,IAChB;AAAA,IACA,UAAU;AAAA,IACV,QAAQ;AAAA,MACN;AAAA,QACE,MAAM,eAAe;AAAA,QACrB,OAAO,eAAe;AAAA,QACtB,OAAO,eAAe;AAAA,QACtB,eAAe,eAAe;AAAA,QAC9B,mBAAmB;AAAA,MACrB;AAAA,IACF;AAAA,EACF;AACF;AASO,SAAS,iBACd,SACA,MACA,WACA;AACA,QAAM,eAAe,qBAAqB;AAC1C,QAAM,eAAe,WAAW;AAChC,QAAM,EAAE,OAAO,KAAK,OAAO,MAAM,IAAI,kBAAkB;AAEvD,QAAM,uBAAuB,CAAC,UAA2B;AACvD,QACE,aAAa,SAAS,EAAE,UACxB,YAAY,SAAS,iBAAiB,IACtC;AACA;AAAA,IACF;AAEA,UAAM,cAAc;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,UAAM,OAAO,WAAW;AAAA,EAC1B;AAEA,QAAM,sBAAsB,CAAC,UAA2B;AACtD,UAAM,gBAAgB;AAEtB,QAAI,YAAY,SAAS,iBAAiB,IAAI;AAC5C,YAAM;AAAA,IACR,OAAO;AACL,YAAM,cAAc;AAAA,QAClB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAEA,UAAI,aAAa,SAAS,EAAE,QAAQ;AAClC,cAAM;AACN,cAAM,OAAO,WAAW;AAAA,MAC1B,OAAO;AACL,YAAI,OAAO,WAAW;AAAA,MACxB;AAAA,IACF;AAAA,EACF;AAMA,QAAM,oBAAoB,CAAC,UAA2B;AACpD,QAAI,MAAM,YAAY;AACpB,YAAM,eAAe;AAAA,IACvB;AAEA,QAAI,YAAY,SAAS,iBAAiB,IAAI;AAC5C,YAAM;AACN;AAAA,IACF;AAEA,UAAM,QAAQ,MAAM,eAAe,CAAC;AACpC,QAAI,CAAC,OAAO;AACV;AAAA,IACF;AAEA,UAAM,cAAc;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,QAAI,aAAa,SAAS,EAAE,QAAQ;AAClC,YAAM;AAAA,IACR,OAAO;AACL,UAAI,EAAE,SAAS,MAAM,SAAS,SAAS,MAAM,QAAQ,GAAG,WAAW;AAAA,IACrE;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/charts/pie/providers/ChartProviders.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/pie/providers/ChartProviders.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren, type ReactElement } from 'react';\n\nimport { StoreProvider } from './StoreProvider.js';\nimport { ChartSeriesActionContext } from '../../core/components/series-action/ChartSeriesActionContext.js';\nimport { ChartLegendContext } from '../context/ChartLegendContext.js';\nimport { FormatterContext } from '../context/FormatterContext.js';\nimport { LabelsContext } from '../context/LabelsContext.js';\nimport { PieChartConfigContext } from '../context/PieChartConfigContext.js';\nimport { PieChartRawDataContext } from '../context/PieChartRawDataContext.js';\nimport {\n  PieChartTooltipContext,\n  DEFAULT_TOOLTIP_CONFIG,\n} from '../context/PieChartTooltipContext.js';\nimport { ToolbarContext } from '../context/ToolbarContext.js';\nimport type {\n  PieChartData,\n  PieDonutConfig,\n} from '../types/pie-chart.config.js';\n\nexport interface ChartProvidersProps extends PropsWithChildren {\n  chartData: PieChartData;\n  chartConfig: PieDonutConfig;\n}\n\nexport const ChartProviders = (props: ChartProvidersProps) => {\n  const { chartConfig, chartData, children } = props;\n\n  return (\n    <ChartSeriesActionContext.Provider\n      value={{\n        // We need a cast here as the provider expects unknown and the\n        // react context will not be able to carry the generic anyways.\n        chartSeriesActions: chartConfig.seriesActions as (\n          series: unknown,\n        ) => ReactElement<PropsWithChildren>,\n      }}\n    >\n      <PieChartRawDataContext.Provider value={chartData}>\n        <PieChartConfigContext.Provider value={chartConfig}>\n          <PieChartTooltipContext.Provider\n            value={chartConfig.tooltip ?? DEFAULT_TOOLTIP_CONFIG}\n          >\n            <LabelsContext.Provider\n              value={{\n                hidden: chartConfig.labels?.hidden,\n                valueType: chartConfig.labels?.valueType,\n              }}\n            >\n              <FormatterContext.Provider\n                value={{\n                  formatter: chartConfig.formatter,\n                  truncationMode: chartConfig.truncationMode,\n                }}\n              >\n                <ChartLegendContext.Provider value={chartConfig.legend}>\n                  <ToolbarContext.Provider value={chartConfig.toolbar}>\n                    <StoreProvider>{children}</StoreProvider>\n                  </ToolbarContext.Provider>\n                </ChartLegendContext.Provider>\n              </FormatterContext.Provider>\n            </LabelsContext.Provider>\n          </PieChartTooltipContext.Provider>\n        </PieChartConfigContext.Provider>\n      </PieChartRawDataContext.Provider>\n    </ChartSeriesActionContext.Provider>\n  );\n};\n"],
-  "mappings": "AAwDoB;AAtDpB,SAAS,qBAAqB;AAC9B,SAAS,gCAAgC;AACzC,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AACvC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAWxB,MAAM,iBAAiB,CAAC,UAA+B;AAC5D,QAAM,EAAE,aAAa,WAAW,SAAS,IAAI;AAE7C,SACE;AAAA,IAAC,yBAAyB;AAAA,IAAzB;AAAA,MACC,OAAO;AAAA;AAAA;AAAA,QAGL,oBAAoB,YAAY;AAAA,MAGlC;AAAA,MAEA,8BAAC,uBAAuB,UAAvB,EAAgC,OAAO,WACtC,8BAAC,sBAAsB,UAAtB,EAA+B,OAAO,aACrC;AAAA,QAAC,uBAAuB;AAAA,QAAvB;AAAA,UACC,OAAO,YAAY,WAAW;AAAA,UAE9B;AAAA,YAAC,cAAc;AAAA,YAAd;AAAA,cACC,OAAO;AAAA,gBACL,QAAQ,YAAY,QAAQ;AAAA,gBAC5B,WAAW,YAAY,QAAQ;AAAA,cACjC;AAAA,cAEA;AAAA,gBAAC,iBAAiB;AAAA,gBAAjB;AAAA,kBACC,OAAO;AAAA,oBACL,WAAW,YAAY;AAAA,oBACvB,gBAAgB,YAAY;AAAA,kBAC9B;AAAA,kBAEA,8BAAC,mBAAmB,UAAnB,EAA4B,OAAO,YAAY,QAC9C,8BAAC,eAAe,UAAf,EAAwB,OAAO,YAAY,SAC1C,8BAAC,iBAAe,UAAS,GAC3B,GACF;AAAA;AAAA,cACF;AAAA;AAAA,UACF;AAAA;AAAA,MACF,GACF,GACF;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { type PropsWithChildren, type ReactElement } from 'react';\n\nimport { StoreProvider } from './StoreProvider.js';\nimport { ChartSeriesActionContext } from '../../core/components/series-action/ChartSeriesActionContext.js';\nimport { ChartLegendContext } from '../context/ChartLegendContext.js';\nimport { FormatterContext } from '../context/FormatterContext.js';\nimport { LabelsContext } from '../context/LabelsContext.js';\nimport { PieChartConfigContext } from '../context/PieChartConfigContext.js';\nimport { PieChartRawDataContext } from '../context/PieChartRawDataContext.js';\nimport {\n  PieChartTooltipContext,\n  DEFAULT_TOOLTIP_CONFIG,\n} from '../context/PieChartTooltipContext.js';\nimport { ToolbarContext } from '../context/ToolbarContext.js';\nimport type {\n  PieChartData,\n  PieDonutConfig,\n} from '../types/pie-chart.config.js';\n\nexport interface ChartProvidersProps extends PropsWithChildren {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  chartData: PieChartData;\n  chartConfig: PieDonutConfig;\n}\n\nexport const ChartProviders = (props: ChartProvidersProps) => {\n  const { chartConfig, chartData, children } = props;\n\n  return (\n    <ChartSeriesActionContext.Provider\n      value={{\n        // We need a cast here as the provider expects unknown and the\n        // react context will not be able to carry the generic anyways.\n        chartSeriesActions: chartConfig.seriesActions as (\n          series: unknown,\n        ) => ReactElement<PropsWithChildren>,\n      }}\n    >\n      <PieChartRawDataContext.Provider value={chartData}>\n        <PieChartConfigContext.Provider value={chartConfig}>\n          <PieChartTooltipContext.Provider\n            value={chartConfig.tooltip ?? DEFAULT_TOOLTIP_CONFIG}\n          >\n            <LabelsContext.Provider\n              value={{\n                hidden: chartConfig.labels?.hidden,\n                valueType: chartConfig.labels?.valueType,\n              }}\n            >\n              <FormatterContext.Provider\n                value={{\n                  formatter: chartConfig.formatter,\n                  truncationMode: chartConfig.truncationMode,\n                }}\n              >\n                <ChartLegendContext.Provider value={chartConfig.legend}>\n                  <ToolbarContext.Provider value={chartConfig.toolbar}>\n                    <StoreProvider>{children}</StoreProvider>\n                  </ToolbarContext.Provider>\n                </ChartLegendContext.Provider>\n              </FormatterContext.Provider>\n            </LabelsContext.Provider>\n          </PieChartTooltipContext.Provider>\n        </PieChartConfigContext.Provider>\n      </PieChartRawDataContext.Provider>\n    </ChartSeriesActionContext.Provider>\n  );\n};\n"],
+  "mappings": "AAyDoB;AAvDpB,SAAS,qBAAqB;AAC9B,SAAS,gCAAgC;AACzC,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AACvC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAYxB,MAAM,iBAAiB,CAAC,UAA+B;AAC5D,QAAM,EAAE,aAAa,WAAW,SAAS,IAAI;AAE7C,SACE;AAAA,IAAC,yBAAyB;AAAA,IAAzB;AAAA,MACC,OAAO;AAAA;AAAA;AAAA,QAGL,oBAAoB,YAAY;AAAA,MAGlC;AAAA,MAEA,8BAAC,uBAAuB,UAAvB,EAAgC,OAAO,WACtC,8BAAC,sBAAsB,UAAtB,EAA+B,OAAO,aACrC;AAAA,QAAC,uBAAuB;AAAA,QAAvB;AAAA,UACC,OAAO,YAAY,WAAW;AAAA,UAE9B;AAAA,YAAC,cAAc;AAAA,YAAd;AAAA,cACC,OAAO;AAAA,gBACL,QAAQ,YAAY,QAAQ;AAAA,gBAC5B,WAAW,YAAY,QAAQ;AAAA,cACjC;AAAA,cAEA;AAAA,gBAAC,iBAAiB;AAAA,gBAAjB;AAAA,kBACC,OAAO;AAAA,oBACL,WAAW,YAAY;AAAA,oBACvB,gBAAgB,YAAY;AAAA,kBAC9B;AAAA,kBAEA,8BAAC,mBAAmB,UAAnB,EAA4B,OAAO,YAAY,QAC9C,8BAAC,eAAe,UAAf,EAAwB,OAAO,YAAY,SAC1C,8BAAC,iBAAe,UAAS,GAC3B,GACF;AAAA;AAAA,cACF;AAAA;AAAA,UACF;AAAA;AAAA,MACF,GACF,GACF;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/esm/charts/pie/types/pie-chart.config.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/pie/types/pie-chart.config.ts"],
-  "sourcesContent": ["import { type ReactNode } from 'react';\n\nimport type {\n  ConvertibleUnit,\n  FormatOptions,\n  Unit,\n} from '@dynatrace-sdk/units';\n\nimport {\n  PieChartInternalToolbarConfig,\n  PieChartToolbarConfig,\n} from './toolbar.js';\nimport type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../../core/types/data-props.js';\nimport type { MaskingProps } from '../../../core/types/masking-props.js';\nimport type { StylingProps } from '../../../core/types/styling-props.js';\nimport type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';\nimport type {\n  ColorPalette,\n  CustomColorPalette,\n} from '../../core/types/color-palette.js';\nimport type { ColorRuleProps } from '../../core/types/color-rule.js';\nimport type { Formatter } from '../../core/types/formatter.js';\nimport type { LegendProps } from '../../core/types/legend.js';\nimport type { SeriesActionsTemplate } from '../../core/types/series-actions-template.js';\n/**\n * @public\n * @deprecated use string or Unit type instead\n */\nexport type SliceUnit = string;\n\n/**\n * @public\n */\nexport interface SliceData {\n  /** The category of the slice*/\n  category: string;\n  /** The value of the slice */\n  value: number;\n  /**\n   * The color of the slice. Overrides the color assigned from the color palette.\n   *\n   * @deprecated This key will be removed in a future release. Use ColorRule slot instead.\n   */\n  color?: string;\n}\n\n/**\n * @public\n */\nexport interface PieChartData {\n  /** Slice data array */\n  slices: SliceData[];\n  /** The unit of the slices */\n  unit?: string | Unit;\n}\n\n/**\n * @public\n */\nexport interface PieChartProps\n  extends StylingProps,\n    MaskingProps,\n    DataTestId,\n    BehaviorTrackingProps {\n  /**\n   * Categorical data of the chart.\n   */\n  data: PieChartData;\n  /**\n   * The width of the chart. A number or a string with accepted CSS units is expected.\n   * @defaultValue 100%\n   */\n  width?: number | string;\n  /** The height of the chart. If a number is passed, it will be treated as px.\n   * @defaultValue 300px.\n   */\n  height?: number | string;\n  /**\n   * Set of Color palette to be used in charts.\n   * @defaultValue 'categorical'.\n   */\n  colorPalette?: ColorPalette | CustomColorPalette;\n  /**\n   * Custom Formatter for the chart\n   */\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  /**\n   * Truncation mode to use (start, middle, end)\n   * Applied to all the parts that truncate text.\n   * @defaultValue 'middle'\n   */\n  truncationMode?: TruncationMode;\n  /** Exposed callback to display series actions for a slice  */\n  seriesActions?: (slice: SliceData) => SeriesActionsTemplate;\n  /** Show the loading indicator when truly.\n   * @defaultValue false\n   */\n  loading?: boolean;\n}\n\n/**\n * @public\n */\nexport interface PieChartContextConfig {\n  /**\n   * Set of Color palette to be used in charts.\n   * @defaultValue 'categorical'.\n   */\n  colorPalette?: ColorPalette | CustomColorPalette;\n  /**\n   * Config for the labels of the pie chart slices.\n   */\n  labels?: LabelsConfig;\n  /**\n   * Group configuration for the pie chart.\n   * Aggregates multiple slices into a group (matches threshold config).\n   */\n  grouping?: GroupConfig;\n  /**\n   * Legend configuration for the pie chart\n   */\n  legend?: PieChartLegendConfig;\n  /**\n   * Custom Formatter for the chart\n   */\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  /**\n   * Truncation mode to use (start, middle, end)\n   * Applied to all the parts that truncate text.\n   * @defaultValue 'middle'\n   */\n  truncationMode?: TruncationMode;\n  /**\n   * Toolbar configuration\n   */\n  toolbar?: PieChartToolbarConfig;\n  /**\n   * Tooltip configuration\n   */\n  tooltip?: PieChartCustomTooltipConfig;\n  /** Callback to display series actions for a slice */\n  seriesActions?: (slice: SliceData) => SeriesActionsTemplate;\n  colorRules?: ColorRuleProps[];\n}\n\n/**\n * @internal\n */\nexport type DonutChartContextConfig = PieChartContextConfig;\n\n/**\n * @public\n */\nexport interface PieChartConfiguration extends PieChartContextConfig {\n  /** The height of the chart. If a number is passed, it will be treated as px.\n   * @defaultValue 300px.\n   */\n  height?: number | string;\n}\n\n/**\n * @internal\n */\nexport type DonutChartConfiguration = PieChartConfiguration;\n\n// Config type holding all the required config used in the pie chart. Considers that the defaults have already been applied.\n/**\n * @internal\n */\nexport type RequiredPieChartConfiguration = Required<\n  Omit<\n    PieChartConfiguration,\n    'toolbar' | 'seriesActions' | 'colorRules' | 'tooltip'\n  >\n> & {\n  toolbar?: PieChartInternalToolbarConfig;\n  tooltip?: PieChartCustomTooltipConfig;\n  innerElement?: InnerHandler | ReactNode;\n  colorRules?: ColorRuleProps[];\n};\n\n/**\n * @internal\n */\nexport type RequiredDonutChartConfiguration = RequiredPieChartConfiguration;\n\n/**\n * Tooltip configuration for the pie chart\n * @public\n */\nexport type PieChartCustomTooltipConfig = {\n  hidden?: boolean;\n  template?: PieChartCustomTooltipProps['children'];\n};\n\n/**\n * @internal\n */\nexport type NotRequiredPieChartConfiguration = {\n  seriesActions?: (slice: SliceData) => SeriesActionsTemplate;\n};\n\n/**\n * @internal\n */\nexport type NotRequiredDonutChartConfiguration =\n  NotRequiredPieChartConfiguration;\n\n/**\n * @internal\n */\nexport type PieDonutConfig = (\n  | RequiredPieChartConfiguration\n  | RequiredDonutChartConfiguration\n) &\n  (NotRequiredPieChartConfiguration | NotRequiredDonutChartConfiguration);\n\n/**\n * @public\n */\nexport type LabelTypeOptions = 'absolute' | 'relative';\n/**\n * @public\n */\nexport interface LabelsConfig {\n  /**\n   * Hides the slice labels.\n   * @defaultValue false (all the labels are displayed).\n   */\n  hidden?: boolean;\n  /**\n   * Display the label with a relative or absolute value.\n   * @defaultValue 'relative'\n   */\n  valueType?: LabelTypeOptions;\n}\n\n/**\n * @public\n */\nexport const thresholdTypeOptions = [\n  'absolute',\n  'relative',\n  'number-of-slices',\n] as const;\n/**\n * @public\n */\nexport type ThresholdType = (typeof thresholdTypeOptions)[number];\n\n/**\n * @public\n */\nexport interface ThresholdConfig {\n  /**\n   * Type of the grouping threshold. Can be \"relative\", \"absolute\" or \"number-of-slices\".\n   * @defaultValue 'relative'.\n   */\n  type: ThresholdType;\n  /**\n   * Value of the group threshold.\n   * Default is dynamically calculated depending on the chart size for relative and absolute. 10 in case of number-of-slices.\n   */\n  value: number;\n}\n\n/**\n * @public\n */\nexport interface GroupConfig {\n  /**\n   * Name of the group.\n   * @defaultValue 'Other'.\n   */\n  name?: string;\n  /**\n   * The threshold for the group.\n   */\n  threshold: ThresholdConfig;\n}\n\n/**\n * @public\n */\nexport type PieChartLegendConfig = LegendProps;\n\n/**\n * @public\n */\nexport type DonutChartData = PieChartData;\n\n/**\n * @public\n */\nexport interface DonutChartProps\n  extends StylingProps,\n    MaskingProps,\n    DataTestId,\n    BehaviorTrackingProps {\n  /**\n   * Categorical data of the chart.\n   */\n  data: DonutChartData;\n  /**\n   * The width of the chart. A number or a string with accepted CSS units is expected.\n   * @defaultValue 100%\n   */\n  width?: number | string;\n  /** The height of the chart. If a number is passed, it will be treated as px.\n   * @defaultValue 300px.\n   */\n  height?: number | string;\n  /**\n   * Set of Color palette to be used in charts.\n   * @defaultValue 'categorical'.\n   */\n  colorPalette?: ColorPalette | CustomColorPalette;\n  /**\n   * Custom Formatter for the chart\n   */\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  /**\n   * Truncation mode to use (start, middle, end)\n   * Applied to all the parts that truncate text.\n   * @defaultValue 'middle'\n   */\n  truncationMode?: TruncationMode;\n  /** Exposed callback to display series actions for a slice  */\n  seriesActions?: (slice: SliceData) => SeriesActionsTemplate;\n  /** Show the loading indicator when truly.\n   * @defaultValue false\n   */\n  loading?: boolean;\n}\n\n/**\n * @public\n */\nexport type DonutChartLegendConfig = PieChartLegendConfig;\n\n/**\n * Data provided to the custom tooltip render function for PieChart and DonutChart.\n * @public\n */\nexport type PieChartTooltipPayload = {\n  /** The slice category name */\n  category: string;\n  /** Formatted absolute value */\n  value: string | number;\n  /** Relative value in percent (e.g. 24.5 for 24.5%) */\n  percentage: number;\n  /** Slice color (hex string) */\n  color: string;\n};\n\n/**\n * @public\n */\nexport type PieChartCustomTooltipProps = {\n  hidden?: boolean;\n  symbolAlignment?: 'left' | 'right';\n  children?: (payload: PieChartTooltipPayload) => ReactNode;\n};\n\n/**\n * @public\n */\nexport type DonutChartCustomTooltipProps = PieChartCustomTooltipProps;\n\n// TODO: ADES-3843 Split this type into two different ones, PieChartSlots and DonutChartSlots\n/**\n * @internal\n */\nexport interface PieChartSlots {\n  labels: Partial<LabelsConfig>;\n  grouping: Partial<GroupConfig>;\n  legend: Partial<PieChartLegendConfig>;\n  toolbar: Partial<PieChartToolbarConfig> | undefined;\n  innerElement?: InnerHandler | ReactNode;\n  colorRules: ColorRuleProps[];\n  tooltip?: PieChartCustomTooltipConfig;\n}\n\n/**\n * @internal\n */\nexport type DonutChartSlots = PieChartSlots;\n\n/**\n * @public\n */\nexport type InnerHandler = (value: InnerParams) => ReactNode;\n\n/**\n * @public\n */\nexport type InnerParams = {\n  absoluteValue: number;\n  relativeValue: number;\n  dimensions: { width: number; height: number };\n};\n"],
-  "mappings": "AAiPO,MAAM,uBAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF;",
+  "sourcesContent": ["import { type ReactNode } from 'react';\n\nimport type {\n  ConvertibleUnit,\n  FormatOptions,\n  Unit,\n} from '@dynatrace-sdk/units';\n\nimport {\n  PieChartInternalToolbarConfig,\n  PieChartToolbarConfig,\n} from './toolbar.js';\nimport type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../../core/types/data-props.js';\nimport type { MaskingProps } from '../../../core/types/masking-props.js';\nimport type { StylingProps } from '../../../core/types/styling-props.js';\nimport type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';\nimport type { ChartData } from '../../core/types/chart-data.js';\nimport type { ChartUnit } from '../../core/types/chart-unit.js';\nimport type {\n  ColorPalette,\n  CustomColorPalette,\n} from '../../core/types/color-palette.js';\nimport type { ColorRuleProps } from '../../core/types/color-rule.js';\nimport type { Formatter } from '../../core/types/formatter.js';\nimport type { LegendProps } from '../../core/types/legend.js';\nimport type { SeriesActionsTemplate } from '../../core/types/series-actions-template.js';\n/**\n * Unit for pie/donut chart slices.\n * @public\n * @deprecated use string or Unit type instead\n */\nexport type SliceUnit = string;\n\n/**\n * Legacy data format for a single pie/donut slice.\n * @public\n * @deprecated Use the unified `ChartData` (`ChartDatapoint[]`) format together\n * with `labelAccessor`/`valueAccessor` instead. This interface will be removed\n * in a future release.\n */\nexport interface SliceData {\n  /** The category of the slice*/\n  category: string;\n  /** The value of the slice */\n  value: number;\n  /**\n   * The color of the slice. Overrides the color assigned from the color palette.\n   *\n   * @deprecated This key will be removed in a future release. Use ColorRule slot instead.\n   */\n  color?: string;\n}\n\n/**\n * Legacy data format for PieChart slices.\n * @public\n * @deprecated Use the unified `ChartData` (`ChartDatapoint[]`) format together\n * with `labelAccessor`/`valueAccessor` and the root-level `unit` prop instead.\n * This interface will be removed in a future release.\n */\nexport interface PieChartData {\n  /** Slice data array */\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  slices: SliceData[];\n  /** The unit of the slices */\n  unit?: string | Unit;\n}\n\n/**\n * Properties shared by both the unified `ChartData` and the legacy\n * `PieChartData` variants of {@link PieChartProps}.\n * @public\n */\nexport interface PieChartBaseProps\n  extends StylingProps,\n    MaskingProps,\n    DataTestId,\n    BehaviorTrackingProps {\n  /**\n   * The width of the chart. A number or a string with accepted CSS units is expected.\n   * @defaultValue 100%\n   */\n  width?: number | string;\n  /** The height of the chart. If a number is passed, it will be treated as px.\n   * @defaultValue 300px.\n   */\n  height?: number | string;\n  /**\n   * Set of Color palette to be used in charts.\n   * @defaultValue 'categorical'.\n   */\n  colorPalette?: ColorPalette | CustomColorPalette;\n  /**\n   * Custom Formatter for the chart\n   */\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  /**\n   * Truncation mode to use (start, middle, end)\n   * Applied to all the parts that truncate text.\n   * @defaultValue 'middle'\n   */\n  truncationMode?: TruncationMode;\n  /** Exposed callback to display series actions for a slice  */\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  seriesActions?: (slice: SliceData) => SeriesActionsTemplate;\n  /** Show the loading indicator when truly.\n   * @defaultValue false\n   */\n  loading?: boolean;\n}\n\n/**\n * PieChart props using the unified `ChartData` format. The slice label and\n * value are resolved from each datapoint through `labelAccessor` and\n * `valueAccessor` (dot-notation is supported, e.g. `\"metrics.value\"`).\n * @public\n */\nexport interface PieChartAccessorDataProps extends PieChartBaseProps {\n  /**\n   * Categorical data of the chart in the unified `ChartData` format.\n   */\n  data: ChartData;\n  /** Accessor describing the field that holds the slice label/category. */\n  labelAccessor: string;\n  /** Accessor describing the field that holds the slice value. */\n  valueAccessor: string;\n  /** The unit of the slices. */\n  unit?: ChartUnit;\n}\n\n/**\n * PieChart props using the legacy `PieChartData` format.\n * @public\n * @deprecated Use the unified `ChartData` format with\n * `labelAccessor`/`valueAccessor` instead (see {@link PieChartAccessorDataProps}).\n */\nexport interface PieChartLegacyDataProps extends PieChartBaseProps {\n  /** Categorical data of the chart.*/\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  data: PieChartData;\n  /** Not available in the legacy data format. Use `PieChartAccessorDataProps` with the unified `ChartData` format. */\n  labelAccessor?: never;\n  /** Not available in the legacy data format. Use `PieChartAccessorDataProps` with the unified `ChartData` format. */\n  valueAccessor?: never;\n  /** Not available in the legacy data format. Set the unit via `PieChartData.unit` instead. */\n  unit?: never;\n}\n\n/**\n * Props for the PieChart component.\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport type PieChartProps = PieChartAccessorDataProps | PieChartLegacyDataProps;\n\n/**\n * Configuration for the PieChart context, allowing shared config across multiple charts via {@link PieChartConfig}.\n * @public\n */\nexport interface PieChartContextConfig {\n  /**\n   * Set of Color palette to be used in charts.\n   * @defaultValue 'categorical'.\n   */\n  colorPalette?: ColorPalette | CustomColorPalette;\n  /**\n   * Config for the labels of the pie chart slices.\n   */\n  labels?: LabelsConfig;\n  /**\n   * Group configuration for the pie chart.\n   * Aggregates multiple slices into a group (matches threshold config).\n   */\n  grouping?: GroupConfig;\n  /**\n   * Legend configuration for the pie chart\n   */\n  legend?: PieChartLegendConfig;\n  /**\n   * Custom Formatter for the chart\n   */\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  /**\n   * Truncation mode to use (start, middle, end)\n   * Applied to all the parts that truncate text.\n   * @defaultValue 'middle'\n   */\n  truncationMode?: TruncationMode;\n  /**\n   * Toolbar configuration\n   */\n  toolbar?: PieChartToolbarConfig;\n  /**\n   * Tooltip configuration\n   */\n  tooltip?: PieChartCustomTooltipConfig;\n  /** Callback to display series actions for a slice */\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  seriesActions?: (slice: SliceData) => SeriesActionsTemplate;\n  colorRules?: ColorRuleProps[];\n}\n\n/**\n * @internal\n */\nexport type DonutChartContextConfig = PieChartContextConfig;\n\n/**\n * Full configuration for the PieChart component, extending {@link PieChartContextConfig} with chart dimensions.\n * @public\n */\nexport interface PieChartConfiguration extends PieChartContextConfig {\n  /** The height of the chart. If a number is passed, it will be treated as px.\n   * @defaultValue 300px.\n   */\n  height?: number | string;\n}\n\n/**\n * @internal\n */\nexport type DonutChartConfiguration = PieChartConfiguration;\n\n// Config type holding all the required config used in the pie chart. Considers that the defaults have already been applied.\n/**\n * @internal\n */\nexport type RequiredPieChartConfiguration = Required<\n  Omit<\n    PieChartConfiguration,\n    'toolbar' | 'seriesActions' | 'colorRules' | 'tooltip'\n  >\n> & {\n  toolbar?: PieChartInternalToolbarConfig;\n  tooltip?: PieChartCustomTooltipConfig;\n  innerElement?: InnerHandler | ReactNode;\n  colorRules?: ColorRuleProps[];\n};\n\n/**\n * @internal\n */\nexport type RequiredDonutChartConfiguration = RequiredPieChartConfiguration;\n\n/**\n * Tooltip configuration for the pie chart\n * @public\n */\nexport type PieChartCustomTooltipConfig = {\n  hidden?: boolean;\n  template?: PieChartCustomTooltipProps['children'];\n};\n\n/**\n * @internal\n */\nexport type NotRequiredPieChartConfiguration = {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  seriesActions?: (slice: SliceData) => SeriesActionsTemplate;\n};\n\n/**\n * @internal\n */\nexport type NotRequiredDonutChartConfiguration =\n  NotRequiredPieChartConfiguration;\n\n/**\n * @internal\n */\nexport type PieDonutConfig = (\n  | RequiredPieChartConfiguration\n  | RequiredDonutChartConfiguration\n) &\n  (NotRequiredPieChartConfiguration | NotRequiredDonutChartConfiguration);\n\n/**\n * @public\n */\nexport type LabelTypeOptions = 'absolute' | 'relative';\n/**\n * @public\n */\nexport interface LabelsConfig {\n  /**\n   * Hides the slice labels.\n   * @defaultValue false (all the labels are displayed).\n   */\n  hidden?: boolean;\n  /**\n   * Display the label with a relative or absolute value.\n   * @defaultValue 'relative'\n   */\n  valueType?: LabelTypeOptions;\n}\n\n/**\n * @public\n */\nexport const thresholdTypeOptions = [\n  'absolute',\n  'relative',\n  'number-of-slices',\n] as const;\n/**\n * @public\n */\nexport type ThresholdType = (typeof thresholdTypeOptions)[number];\n\n/**\n * @public\n */\nexport interface ThresholdConfig {\n  /**\n   * Type of the grouping threshold. Can be \"relative\", \"absolute\" or \"number-of-slices\".\n   * @defaultValue 'relative'.\n   */\n  type: ThresholdType;\n  /**\n   * Value of the group threshold.\n   * Default is dynamically calculated depending on the chart size for relative and absolute. 10 in case of number-of-slices.\n   */\n  value: number;\n}\n\n/**\n * @public\n */\nexport interface GroupConfig {\n  /**\n   * Name of the group.\n   * @defaultValue 'Other'.\n   */\n  name?: string;\n  /**\n   * The threshold for the group.\n   */\n  threshold: ThresholdConfig;\n}\n\n/**\n * Legend configuration for the PieChart component.\n * @public\n */\nexport type PieChartLegendConfig = LegendProps;\n\n/**\n * Legacy data format for the DonutChart component.\n * @public\n * @deprecated Use the unified `ChartData` (`ChartDatapoint[]`) format together\n * with `labelAccessor`/`valueAccessor` and the root-level `unit` prop instead.\n * This type will be removed in a future release.\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport type DonutChartData = PieChartData;\n\n/**\n * Properties shared by both the unified `ChartData` and the legacy\n * `DonutChartData` variants of {@link DonutChartProps}.\n * @public\n */\nexport type DonutChartBaseProps = PieChartBaseProps;\n\n/**\n * DonutChart props using the unified `ChartData` format. The slice label and\n * value are resolved from each datapoint through `labelAccessor` and\n * `valueAccessor` (dot-notation is supported, e.g. `\"metrics.value\"`).\n * @public\n */\nexport interface DonutChartAccessorDataProps extends DonutChartBaseProps {\n  /**\n   * Categorical data of the chart in the unified `ChartData` format.\n   */\n  data: ChartData;\n  /** Accessor describing the field that holds the slice label/category. */\n  labelAccessor: string;\n  /** Accessor describing the field that holds the slice value. */\n  valueAccessor: string;\n  /** The unit of the slices. */\n  unit?: ChartUnit;\n}\n\n/**\n * DonutChart props using the legacy `DonutChartData` format.\n * @public\n * @deprecated Use the unified `ChartData` (`ChartDatapoint[]`) format together\n * with `labelAccessor`/`valueAccessor` and the root-level `unit` prop instead.\n * This interface will be removed in a future release.\n */\nexport interface DonutChartLegacyDataProps extends DonutChartBaseProps {\n  /** Categorical data of the chart. */\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  data: DonutChartData;\n  /** Not available in the legacy data format. Use `DonutChartAccessorDataProps` with the unified `ChartData` format. */\n  labelAccessor?: never;\n  /** Not available in the legacy data format. Use `DonutChartAccessorDataProps` with the unified `ChartData` format. */\n  valueAccessor?: never;\n  /** Not available in the legacy data format. Set the unit via `DonutChartData.unit` instead. */\n  unit?: never;\n}\n\n/**\n * Props for the DonutChart component.\n * @public\n */\nexport type DonutChartProps =\n  | DonutChartAccessorDataProps\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  | DonutChartLegacyDataProps;\n\n/**\n * Legend configuration for the DonutChart component.\n * @public\n */\nexport type DonutChartLegendConfig = PieChartLegendConfig;\n\n/**\n * Data provided to the custom tooltip render function for PieChart and DonutChart.\n * @public\n */\nexport type PieChartTooltipPayload = {\n  /** The slice category name */\n  category: string;\n  /** Formatted absolute value */\n  value: string | number;\n  /** Relative value in percent (e.g. 24.5 for 24.5%) */\n  percentage: number;\n  /** Slice color (hex string) */\n  color: string;\n};\n\n/**\n * Props for a custom tooltip rendered inside the PieChart.\n * @public\n */\nexport type PieChartCustomTooltipProps = {\n  hidden?: boolean;\n  symbolAlignment?: 'left' | 'right';\n  children?: (payload: PieChartTooltipPayload) => ReactNode;\n};\n\n/**\n * Props for a custom tooltip rendered inside the DonutChart.\n * @public\n */\nexport type DonutChartCustomTooltipProps = PieChartCustomTooltipProps;\n\n// TODO: ADES-3843 Split this type into two different ones, PieChartSlots and DonutChartSlots\n/**\n * @internal\n */\nexport interface PieChartSlots {\n  labels: Partial<LabelsConfig>;\n  grouping: Partial<GroupConfig>;\n  legend: Partial<PieChartLegendConfig>;\n  toolbar: Partial<PieChartToolbarConfig> | undefined;\n  innerElement?: InnerHandler | ReactNode;\n  colorRules: ColorRuleProps[];\n  tooltip?: PieChartCustomTooltipConfig;\n}\n\n/**\n * @internal\n */\nexport type DonutChartSlots = PieChartSlots;\n\n/**\n * @public\n */\nexport type InnerHandler = (value: InnerParams) => ReactNode;\n\n/**\n * @public\n */\nexport type InnerParams = {\n  absoluteValue: number;\n  relativeValue: number;\n  dimensions: { width: number; height: number };\n};\n"],
+  "mappings": "AA4SO,MAAM,uBAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF;",
   "names": []
 }

package/esm/charts/pie/utils/build-and-download-csv.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/pie/utils/build-and-download-csv.ts"],
-  "sourcesContent": ["import { formatCsv } from './format-csv.js';\nimport { downloadCSV } from '../../../core/utils/download.js';\nimport { CSS_DOWNLOAD_FILENAME } from '../../core/constants.js';\nimport { DonutChartData, PieChartData } from '../types/pie-chart.config.js';\n\nexport const buildAndDownloadCsv = (\n  chartData: PieChartData | DonutChartData,\n) => {\n  const csvString = formatCsv(chartData);\n  downloadCSV(csvString, CSS_DOWNLOAD_FILENAME);\n};\n"],
-  "mappings": "AAAA,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,6BAA6B;AAG/B,MAAM,sBAAsB,CACjC,cACG;AACH,QAAM,YAAY,UAAU,SAAS;AACrC,cAAY,WAAW,qBAAqB;AAC9C;",
+  "sourcesContent": ["import { formatCsv } from './format-csv.js';\nimport { downloadCSV } from '../../../core/utils/download.js';\nimport { CSS_DOWNLOAD_FILENAME } from '../../core/constants.js';\nimport { DonutChartData, PieChartData } from '../types/pie-chart.config.js';\n\nexport const buildAndDownloadCsv = (\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  chartData: PieChartData | DonutChartData,\n) => {\n  const csvString = formatCsv(chartData);\n  downloadCSV(csvString, CSS_DOWNLOAD_FILENAME);\n};\n"],
+  "mappings": "AAAA,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,6BAA6B;AAG/B,MAAM,sBAAsB,CAEjC,cACG;AACH,QAAM,YAAY,UAAU,SAAS;AACrC,cAAY,WAAW,qBAAqB;AAC9C;",
   "names": []
 }

package/esm/charts/pie/utils/build-group-threshold.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/pie/utils/build-group-threshold.ts"],
-  "sourcesContent": ["import { partition } from 'lodash-es';\n\nimport type { Unit } from '@dynatrace-sdk/units';\n\nimport { buildSlices } from './build-slices.js';\nimport {\n  CustomColorPalette,\n  ColorPalette,\n} from '../../core/types/color-palette.js';\nimport { THRESHOLD_TYPE } from '../types/default.js';\nimport { InternalSliceData } from '../types/internal/pie-chart.js';\nimport {\n  ThresholdConfig,\n  SliceData,\n  GroupConfig,\n} from '../types/pie-chart.config.js';\n\n/**\n * Group the data depending on which threshold the user has selected\n * @param data - Data received from the dataSet\n * @param grouping - Received grouping config\n * @param colorPalette - Palette to apply to the slices.\n * @param unit - Unit of the data.\n */\nexport function buildGroupThreshold(\n  data: SliceData[],\n  grouping?: GroupConfig,\n  colorPalette?: ColorPalette | CustomColorPalette,\n  unit?: string | Unit,\n): InternalSliceData[] {\n  const internalSlicesData = buildSlices(data, colorPalette, unit);\n\n  const threshold = grouping?.threshold;\n\n  if (threshold?.type === THRESHOLD_TYPE.NUMBER_OF_SLICES) {\n    return calculateNumberOfSlicesGrouping(\n      internalSlicesData,\n      threshold,\n      grouping?.name,\n    );\n  }\n\n  if (threshold?.type === THRESHOLD_TYPE.RELATIVE) {\n    return calculateRelativeGrouping(\n      internalSlicesData,\n      threshold,\n      grouping?.name,\n    );\n  }\n\n  if (threshold?.type === THRESHOLD_TYPE.ABSOLUTE) {\n    return calculateAbsoluteGrouping(\n      internalSlicesData,\n      threshold,\n      grouping?.name,\n    );\n  }\n\n  return internalSlicesData;\n}\n\n/**\n * Calculates the groups depending on the number of the slices.\n * @param data - Information received from the dataset already prepared with some metadata.\n * @param threshold - Indicates the way to group the slices.\n * @param groupingName - Name for the group.\n * @returns An array of an internal slices.\n */\nfunction calculateNumberOfSlicesGrouping(\n  data: InternalSliceData[],\n  threshold: ThresholdConfig,\n  groupingName?: string,\n): InternalSliceData[] {\n  const slicesWithValue = data.filter((slice) => slice.value);\n  const slicesToMerge = slicesWithValue.slice(threshold.value - 1);\n  const remainingSlices = slicesWithValue.slice(0, threshold.value - 1);\n\n  if (threshold.value === 0) {\n    return [...slicesToMerge, ...remainingSlices];\n  }\n\n  return generateGroup(slicesToMerge, remainingSlices, groupingName);\n}\n\n/**\n * Calculates the relative value using the threshold value and groups the slices.\n * @param data - Information received from the dataset already prepared with some metadata.\n * @param threshold - Indicates the way to group the slices.\n * @param groupingName - Name for the group.\n * @returns An array of an internal slices.\n */\nfunction calculateRelativeGrouping(\n  data: InternalSliceData[],\n  threshold: ThresholdConfig,\n  groupingName?: string,\n): InternalSliceData[] {\n  const slicesWithValue = data.filter((slice) => slice.value);\n\n  const [slicesToMerge, remainingSlices] = partition(\n    slicesWithValue,\n    (slice) => slice.relativeValue < threshold.value,\n  );\n\n  return generateGroup(slicesToMerge, remainingSlices, groupingName);\n}\n\n/**\n * Calculates the absolute value using the threshold value and groups the slices.\n * @param data - Information received from the dataset already prepared with some metadata.\n * @param threshold - Indicates the way to group the slices.\n * @param groupingName - Name for the group.\n * @returns An array of an internal slices.\n */\nfunction calculateAbsoluteGrouping(\n  data: InternalSliceData[],\n  threshold: ThresholdConfig,\n  groupingName: string | undefined,\n): InternalSliceData[] {\n  const slicesWithValue = data.filter((slice) => slice.value);\n\n  const [slicesToMerge, remainingSlices] = partition(\n    slicesWithValue,\n    (slice) => slice.value < threshold.value,\n  );\n\n  return generateGroup(slicesToMerge, remainingSlices, groupingName);\n}\n\n/**\n * Organize the data in different groups and recalculates colors\n * @param slicesToMerge - slices to merge into the Other category\n * @param data - Information received from the dataset already prepared with some metadata.\n * @param groupingName - Name of the group\n * @returns An array of an internal slices.\n */\nfunction generateGroup(\n  slicesToMerge: InternalSliceData[],\n  data: InternalSliceData[],\n  groupingName?: string,\n): InternalSliceData[] {\n  const isWithoutGrouping = !slicesToMerge.length || slicesToMerge.length === 1;\n\n  if (isWithoutGrouping) {\n    return [...data, ...slicesToMerge];\n  }\n\n  // Returns the numerical value of the id of the first slice that is going to be merge\n  const groupIndexValue = slicesToMerge[0].id.split('-')[1];\n\n  const groupId = groupingName\n    ? groupingName + '-' + groupIndexValue\n    : 'other-' + groupIndexValue;\n\n  const mergedSlice = slicesToMerge.reduce(\n    (acc, curr) => ({\n      ...acc,\n      ...curr,\n      category: groupingName ?? 'Other',\n      value: acc.value + curr.value,\n      relativeValue: acc.relativeValue + curr.relativeValue,\n      color: slicesToMerge[0].color,\n      id: groupId,\n    }),\n    {\n      value: 0,\n      relativeValue: 0,\n    } as InternalSliceData,\n  );\n\n  return [...data, mergedSlice];\n}\n"],
-  "mappings": "AAAA,SAAS,iBAAiB;AAI1B,SAAS,mBAAmB;AAK5B,SAAS,sBAAsB;AAexB,SAAS,oBACd,MACA,UACA,cACA,MACqB;AACrB,QAAM,qBAAqB,YAAY,MAAM,cAAc,IAAI;AAE/D,QAAM,YAAY,UAAU;AAE5B,MAAI,WAAW,SAAS,eAAe,kBAAkB;AACvD,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,EACF;AAEA,MAAI,WAAW,SAAS,eAAe,UAAU;AAC/C,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,EACF;AAEA,MAAI,WAAW,SAAS,eAAe,UAAU;AAC/C,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,EACF;AAEA,SAAO;AACT;AASA,SAAS,gCACP,MACA,WACA,cACqB;AACrB,QAAM,kBAAkB,KAAK,OAAO,CAAC,UAAU,MAAM,KAAK;AAC1D,QAAM,gBAAgB,gBAAgB,MAAM,UAAU,QAAQ,CAAC;AAC/D,QAAM,kBAAkB,gBAAgB,MAAM,GAAG,UAAU,QAAQ,CAAC;AAEpE,MAAI,UAAU,UAAU,GAAG;AACzB,WAAO,CAAC,GAAG,eAAe,GAAG,eAAe;AAAA,EAC9C;AAEA,SAAO,cAAc,eAAe,iBAAiB,YAAY;AACnE;AASA,SAAS,0BACP,MACA,WACA,cACqB;AACrB,QAAM,kBAAkB,KAAK,OAAO,CAAC,UAAU,MAAM,KAAK;AAE1D,QAAM,CAAC,eAAe,eAAe,IAAI;AAAA,IACvC;AAAA,IACA,CAAC,UAAU,MAAM,gBAAgB,UAAU;AAAA,EAC7C;AAEA,SAAO,cAAc,eAAe,iBAAiB,YAAY;AACnE;AASA,SAAS,0BACP,MACA,WACA,cACqB;AACrB,QAAM,kBAAkB,KAAK,OAAO,CAAC,UAAU,MAAM,KAAK;AAE1D,QAAM,CAAC,eAAe,eAAe,IAAI;AAAA,IACvC;AAAA,IACA,CAAC,UAAU,MAAM,QAAQ,UAAU;AAAA,EACrC;AAEA,SAAO,cAAc,eAAe,iBAAiB,YAAY;AACnE;AASA,SAAS,cACP,eACA,MACA,cACqB;AACrB,QAAM,oBAAoB,CAAC,cAAc,UAAU,cAAc,WAAW;AAE5E,MAAI,mBAAmB;AACrB,WAAO,CAAC,GAAG,MAAM,GAAG,aAAa;AAAA,EACnC;AAGA,QAAM,kBAAkB,cAAc,CAAC,EAAE,GAAG,MAAM,GAAG,EAAE,CAAC;AAExD,QAAM,UAAU,eACZ,eAAe,MAAM,kBACrB,WAAW;AAEf,QAAM,cAAc,cAAc;AAAA,IAChC,CAAC,KAAK,UAAU;AAAA,MACd,GAAG;AAAA,MACH,GAAG;AAAA,MACH,UAAU,gBAAgB;AAAA,MAC1B,OAAO,IAAI,QAAQ,KAAK;AAAA,MACxB,eAAe,IAAI,gBAAgB,KAAK;AAAA,MACxC,OAAO,cAAc,CAAC,EAAE;AAAA,MACxB,IAAI;AAAA,IACN;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,eAAe;AAAA,IACjB;AAAA,EACF;AAEA,SAAO,CAAC,GAAG,MAAM,WAAW;AAC9B;",
+  "sourcesContent": ["import { partition } from 'lodash-es';\n\nimport type { Unit } from '@dynatrace-sdk/units';\n\nimport { buildSlices } from './build-slices.js';\nimport {\n  CustomColorPalette,\n  ColorPalette,\n} from '../../core/types/color-palette.js';\nimport { THRESHOLD_TYPE } from '../types/default.js';\nimport { InternalSliceData } from '../types/internal/pie-chart.js';\nimport {\n  ThresholdConfig,\n  SliceData,\n  GroupConfig,\n} from '../types/pie-chart.config.js';\n\n/**\n * Group the data depending on which threshold the user has selected\n * @param data - Data received from the dataSet\n * @param grouping - Received grouping config\n * @param colorPalette - Palette to apply to the slices.\n * @param unit - Unit of the data.\n */\nexport function buildGroupThreshold(\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  data: SliceData[],\n  grouping?: GroupConfig,\n  colorPalette?: ColorPalette | CustomColorPalette,\n  unit?: string | Unit,\n): InternalSliceData[] {\n  const internalSlicesData = buildSlices(data, colorPalette, unit);\n\n  const threshold = grouping?.threshold;\n\n  if (threshold?.type === THRESHOLD_TYPE.NUMBER_OF_SLICES) {\n    return calculateNumberOfSlicesGrouping(\n      internalSlicesData,\n      threshold,\n      grouping?.name,\n    );\n  }\n\n  if (threshold?.type === THRESHOLD_TYPE.RELATIVE) {\n    return calculateRelativeGrouping(\n      internalSlicesData,\n      threshold,\n      grouping?.name,\n    );\n  }\n\n  if (threshold?.type === THRESHOLD_TYPE.ABSOLUTE) {\n    return calculateAbsoluteGrouping(\n      internalSlicesData,\n      threshold,\n      grouping?.name,\n    );\n  }\n\n  return internalSlicesData;\n}\n\n/**\n * Calculates the groups depending on the number of the slices.\n * @param data - Information received from the dataset already prepared with some metadata.\n * @param threshold - Indicates the way to group the slices.\n * @param groupingName - Name for the group.\n * @returns An array of an internal slices.\n */\nfunction calculateNumberOfSlicesGrouping(\n  data: InternalSliceData[],\n  threshold: ThresholdConfig,\n  groupingName?: string,\n): InternalSliceData[] {\n  const slicesWithValue = data.filter((slice) => slice.value);\n  const slicesToMerge = slicesWithValue.slice(threshold.value - 1);\n  const remainingSlices = slicesWithValue.slice(0, threshold.value - 1);\n\n  if (threshold.value === 0) {\n    return [...slicesToMerge, ...remainingSlices];\n  }\n\n  return generateGroup(slicesToMerge, remainingSlices, groupingName);\n}\n\n/**\n * Calculates the relative value using the threshold value and groups the slices.\n * @param data - Information received from the dataset already prepared with some metadata.\n * @param threshold - Indicates the way to group the slices.\n * @param groupingName - Name for the group.\n * @returns An array of an internal slices.\n */\nfunction calculateRelativeGrouping(\n  data: InternalSliceData[],\n  threshold: ThresholdConfig,\n  groupingName?: string,\n): InternalSliceData[] {\n  const slicesWithValue = data.filter((slice) => slice.value);\n\n  const [slicesToMerge, remainingSlices] = partition(\n    slicesWithValue,\n    (slice) => slice.relativeValue < threshold.value,\n  );\n\n  return generateGroup(slicesToMerge, remainingSlices, groupingName);\n}\n\n/**\n * Calculates the absolute value using the threshold value and groups the slices.\n * @param data - Information received from the dataset already prepared with some metadata.\n * @param threshold - Indicates the way to group the slices.\n * @param groupingName - Name for the group.\n * @returns An array of an internal slices.\n */\nfunction calculateAbsoluteGrouping(\n  data: InternalSliceData[],\n  threshold: ThresholdConfig,\n  groupingName: string | undefined,\n): InternalSliceData[] {\n  const slicesWithValue = data.filter((slice) => slice.value);\n\n  const [slicesToMerge, remainingSlices] = partition(\n    slicesWithValue,\n    (slice) => slice.value < threshold.value,\n  );\n\n  return generateGroup(slicesToMerge, remainingSlices, groupingName);\n}\n\n/**\n * Organize the data in different groups and recalculates colors\n * @param slicesToMerge - slices to merge into the Other category\n * @param data - Information received from the dataset already prepared with some metadata.\n * @param groupingName - Name of the group\n * @returns An array of an internal slices.\n */\nfunction generateGroup(\n  slicesToMerge: InternalSliceData[],\n  data: InternalSliceData[],\n  groupingName?: string,\n): InternalSliceData[] {\n  const isWithoutGrouping = !slicesToMerge.length || slicesToMerge.length === 1;\n\n  if (isWithoutGrouping) {\n    return [...data, ...slicesToMerge];\n  }\n\n  // Returns the numerical value of the id of the first slice that is going to be merge\n  const groupIndexValue = slicesToMerge[0].id.split('-')[1];\n\n  const groupId = groupingName\n    ? groupingName + '-' + groupIndexValue\n    : 'other-' + groupIndexValue;\n\n  const mergedSlice = slicesToMerge.reduce(\n    (acc, curr) => ({\n      ...acc,\n      ...curr,\n      category: groupingName ?? 'Other',\n      value: acc.value + curr.value,\n      relativeValue: acc.relativeValue + curr.relativeValue,\n      color: slicesToMerge[0].color,\n      id: groupId,\n    }),\n    {\n      value: 0,\n      relativeValue: 0,\n    } as InternalSliceData,\n  );\n\n  return [...data, mergedSlice];\n}\n"],
+  "mappings": "AAAA,SAAS,iBAAiB;AAI1B,SAAS,mBAAmB;AAK5B,SAAS,sBAAsB;AAexB,SAAS,oBAEd,MACA,UACA,cACA,MACqB;AACrB,QAAM,qBAAqB,YAAY,MAAM,cAAc,IAAI;AAE/D,QAAM,YAAY,UAAU;AAE5B,MAAI,WAAW,SAAS,eAAe,kBAAkB;AACvD,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,EACF;AAEA,MAAI,WAAW,SAAS,eAAe,UAAU;AAC/C,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,EACF;AAEA,MAAI,WAAW,SAAS,eAAe,UAAU;AAC/C,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,EACF;AAEA,SAAO;AACT;AASA,SAAS,gCACP,MACA,WACA,cACqB;AACrB,QAAM,kBAAkB,KAAK,OAAO,CAAC,UAAU,MAAM,KAAK;AAC1D,QAAM,gBAAgB,gBAAgB,MAAM,UAAU,QAAQ,CAAC;AAC/D,QAAM,kBAAkB,gBAAgB,MAAM,GAAG,UAAU,QAAQ,CAAC;AAEpE,MAAI,UAAU,UAAU,GAAG;AACzB,WAAO,CAAC,GAAG,eAAe,GAAG,eAAe;AAAA,EAC9C;AAEA,SAAO,cAAc,eAAe,iBAAiB,YAAY;AACnE;AASA,SAAS,0BACP,MACA,WACA,cACqB;AACrB,QAAM,kBAAkB,KAAK,OAAO,CAAC,UAAU,MAAM,KAAK;AAE1D,QAAM,CAAC,eAAe,eAAe,IAAI;AAAA,IACvC;AAAA,IACA,CAAC,UAAU,MAAM,gBAAgB,UAAU;AAAA,EAC7C;AAEA,SAAO,cAAc,eAAe,iBAAiB,YAAY;AACnE;AASA,SAAS,0BACP,MACA,WACA,cACqB;AACrB,QAAM,kBAAkB,KAAK,OAAO,CAAC,UAAU,MAAM,KAAK;AAE1D,QAAM,CAAC,eAAe,eAAe,IAAI;AAAA,IACvC;AAAA,IACA,CAAC,UAAU,MAAM,QAAQ,UAAU;AAAA,EACrC;AAEA,SAAO,cAAc,eAAe,iBAAiB,YAAY;AACnE;AASA,SAAS,cACP,eACA,MACA,cACqB;AACrB,QAAM,oBAAoB,CAAC,cAAc,UAAU,cAAc,WAAW;AAE5E,MAAI,mBAAmB;AACrB,WAAO,CAAC,GAAG,MAAM,GAAG,aAAa;AAAA,EACnC;AAGA,QAAM,kBAAkB,cAAc,CAAC,EAAE,GAAG,MAAM,GAAG,EAAE,CAAC;AAExD,QAAM,UAAU,eACZ,eAAe,MAAM,kBACrB,WAAW;AAEf,QAAM,cAAc,cAAc;AAAA,IAChC,CAAC,KAAK,UAAU;AAAA,MACd,GAAG;AAAA,MACH,GAAG;AAAA,MACH,UAAU,gBAAgB;AAAA,MAC1B,OAAO,IAAI,QAAQ,KAAK;AAAA,MACxB,eAAe,IAAI,gBAAgB,KAAK;AAAA,MACxC,OAAO,cAAc,CAAC,EAAE;AAAA,MACxB,IAAI;AAAA,IACN;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,eAAe;AAAA,IACjB;AAAA,EACF;AAEA,SAAO,CAAC,GAAG,MAAM,WAAW;AAC9B;",
   "names": []
 }

package/esm/charts/pie/utils/build-slices.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/pie/utils/build-slices.ts"],
-  "sourcesContent": ["import { type Unit } from '@dynatrace-sdk/units';\n\nimport {\n  CustomColorPalette,\n  ColorPalette,\n} from '../../core/types/color-palette.js';\nimport { getColorPalette } from '../../core/utils/get-color-palette.js';\nimport { InternalSliceData } from '../types/internal/pie-chart.js';\nimport { SliceData } from '../types/pie-chart.config.js';\nimport { getSlicePercentage } from '../utils/plot-data.utils.js';\n\nconst DEFAULT_COLOR_PALETTE = 'categorical';\n\n/**\n * Builds the slices and their configurations for the pie and donut chart.\n * @param data - Data received from the dataSet.\n * @param colorPalette - Color to apply to the slices.\n * @returns An array of internal slices.\n */\nexport const buildSlices = (\n  data: SliceData[],\n  colorPalette?: ColorPalette | CustomColorPalette,\n  unit?: string | Unit,\n): InternalSliceData[] => {\n  const totalAbsoluteValueSum = Object.values(data).reduce(\n    (total, { value }) => total + Math.abs(value),\n    0,\n  );\n\n  return data.map((slice, index) => {\n    const assignedPaletteColor = getColorPalette(\n      slice.category,\n      index,\n      colorPalette ?? DEFAULT_COLOR_PALETTE,\n    );\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    const priorityColor = slice.color && { Default: slice.color };\n\n    return {\n      ...slice,\n      id: `${slice.category}-${index}`,\n      relativeValue: getSlicePercentage(slice.value, totalAbsoluteValueSum),\n      color: priorityColor || assignedPaletteColor,\n      _priorityColor: priorityColor || undefined,\n      unit,\n    };\n  });\n};\n"],
-  "mappings": "AAMA,SAAS,uBAAuB;AAGhC,SAAS,0BAA0B;AAEnC,MAAM,wBAAwB;AAQvB,MAAM,cAAc,CACzB,MACA,cACA,SACwB;AACxB,QAAM,wBAAwB,OAAO,OAAO,IAAI,EAAE;AAAA,IAChD,CAAC,OAAO,EAAE,MAAM,MAAM,QAAQ,KAAK,IAAI,KAAK;AAAA,IAC5C;AAAA,EACF;AAEA,SAAO,KAAK,IAAI,CAAC,OAAO,UAAU;AAChC,UAAM,uBAAuB;AAAA,MAC3B,MAAM;AAAA,MACN;AAAA,MACA,gBAAgB;AAAA,IAClB;AAEA,UAAM,gBAAgB,MAAM,SAAS,EAAE,SAAS,MAAM,MAAM;AAE5D,WAAO;AAAA,MACL,GAAG;AAAA,MACH,IAAI,GAAG,MAAM,QAAQ,IAAI,KAAK;AAAA,MAC9B,eAAe,mBAAmB,MAAM,OAAO,qBAAqB;AAAA,MACpE,OAAO,iBAAiB;AAAA,MACxB,gBAAgB,iBAAiB;AAAA,MACjC;AAAA,IACF;AAAA,EACF,CAAC;AACH;",
+  "sourcesContent": ["import { type Unit } from '@dynatrace-sdk/units';\n\nimport {\n  CustomColorPalette,\n  ColorPalette,\n} from '../../core/types/color-palette.js';\nimport { getColorPalette } from '../../core/utils/get-color-palette.js';\nimport { InternalSliceData } from '../types/internal/pie-chart.js';\nimport { SliceData } from '../types/pie-chart.config.js';\nimport { getSlicePercentage } from '../utils/plot-data.utils.js';\n\nconst DEFAULT_COLOR_PALETTE = 'categorical';\n\n/**\n * Builds the slices and their configurations for the pie and donut chart.\n * @param data - Data received from the dataSet.\n * @param colorPalette - Color to apply to the slices.\n * @returns An array of internal slices.\n */\nexport const buildSlices = (\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  data: SliceData[],\n  colorPalette?: ColorPalette | CustomColorPalette,\n  unit?: string | Unit,\n): InternalSliceData[] => {\n  const totalAbsoluteValueSum = Object.values(data).reduce(\n    (total, { value }) => total + Math.abs(value),\n    0,\n  );\n\n  return data.map((slice, index) => {\n    const assignedPaletteColor = getColorPalette(\n      slice.category,\n      index,\n      colorPalette ?? DEFAULT_COLOR_PALETTE,\n    );\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    const priorityColor = slice.color && { Default: slice.color };\n\n    return {\n      ...slice,\n      id: `${slice.category}-${index}`,\n      relativeValue: getSlicePercentage(slice.value, totalAbsoluteValueSum),\n      color: priorityColor || assignedPaletteColor,\n      _priorityColor: priorityColor || undefined,\n      unit,\n    };\n  });\n};\n"],
+  "mappings": "AAMA,SAAS,uBAAuB;AAGhC,SAAS,0BAA0B;AAEnC,MAAM,wBAAwB;AAQvB,MAAM,cAAc,CAEzB,MACA,cACA,SACwB;AACxB,QAAM,wBAAwB,OAAO,OAAO,IAAI,EAAE;AAAA,IAChD,CAAC,OAAO,EAAE,MAAM,MAAM,QAAQ,KAAK,IAAI,KAAK;AAAA,IAC5C;AAAA,EACF;AAEA,SAAO,KAAK,IAAI,CAAC,OAAO,UAAU;AAChC,UAAM,uBAAuB;AAAA,MAC3B,MAAM;AAAA,MACN;AAAA,MACA,gBAAgB;AAAA,IAClB;AAEA,UAAM,gBAAgB,MAAM,SAAS,EAAE,SAAS,MAAM,MAAM;AAE5D,WAAO;AAAA,MACL,GAAG;AAAA,MACH,IAAI,GAAG,MAAM,QAAQ,IAAI,KAAK;AAAA,MAC9B,eAAe,mBAAmB,MAAM,OAAO,qBAAqB;AAAA,MACpE,OAAO,iBAAiB;AAAA,MACxB,gBAAgB,iBAAiB;AAAA,MACjC;AAAA,IACF;AAAA,EACF,CAAC;AACH;",
   "names": []
 }

package/esm/charts/pie/utils/format-csv.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/pie/utils/format-csv.ts"],
-  "sourcesContent": ["import { escapeForCSV } from '../../../core/utils/download.js';\nimport { PieChartData } from '../types/pie-chart.config.js';\n\nexport function formatCsv(rawData: PieChartData) {\n  const csvRows: string[] = ['category, value, unit'];\n  const escapedUnit = escapeForCSV(rawData.unit);\n\n  for (const slice of rawData.slices) {\n    const sanitizedValue = escapeForCSV(slice.value);\n\n    const sanitizedCategory = escapeForCSV(slice.category);\n\n    const csvRow = [sanitizedCategory, sanitizedValue, escapedUnit].join(',');\n    csvRows.push(csvRow);\n  }\n\n  return csvRows.join('\\r\\n');\n}\n"],
-  "mappings": "AAAA,SAAS,oBAAoB;AAGtB,SAAS,UAAU,SAAuB;AAC/C,QAAM,UAAoB,CAAC,uBAAuB;AAClD,QAAM,cAAc,aAAa,QAAQ,IAAI;AAE7C,aAAW,SAAS,QAAQ,QAAQ;AAClC,UAAM,iBAAiB,aAAa,MAAM,KAAK;AAE/C,UAAM,oBAAoB,aAAa,MAAM,QAAQ;AAErD,UAAM,SAAS,CAAC,mBAAmB,gBAAgB,WAAW,EAAE,KAAK,GAAG;AACxE,YAAQ,KAAK,MAAM;AAAA,EACrB;AAEA,SAAO,QAAQ,KAAK,MAAM;AAC5B;",
+  "sourcesContent": ["import { escapeForCSV } from '../../../core/utils/download.js';\nimport { PieChartData } from '../types/pie-chart.config.js';\n\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport function formatCsv(rawData: PieChartData) {\n  const csvRows: string[] = ['category, value, unit'];\n  const escapedUnit = escapeForCSV(rawData.unit);\n\n  for (const slice of rawData.slices) {\n    const sanitizedValue = escapeForCSV(slice.value);\n\n    const sanitizedCategory = escapeForCSV(slice.category);\n\n    const csvRow = [sanitizedCategory, sanitizedValue, escapedUnit].join(',');\n    csvRows.push(csvRow);\n  }\n\n  return csvRows.join('\\r\\n');\n}\n"],
+  "mappings": "AAAA,SAAS,oBAAoB;AAItB,SAAS,UAAU,SAAuB;AAC/C,QAAM,UAAoB,CAAC,uBAAuB;AAClD,QAAM,cAAc,aAAa,QAAQ,IAAI;AAE7C,aAAW,SAAS,QAAQ,QAAQ;AAClC,UAAM,iBAAiB,aAAa,MAAM,KAAK;AAE/C,UAAM,oBAAoB,aAAa,MAAM,QAAQ;AAErD,UAAM,SAAS,CAAC,mBAAmB,gBAAgB,WAAW,EAAE,KAAK,GAAG;AACxE,YAAQ,KAAK,MAAM;AAAA,EACrB;AAEA,SAAO,QAAQ,KAAK,MAAM;AAC5B;",
   "names": []
 }

package/esm/charts/pie/utils/group-slices-thinner-than-pad-angle.js

@@ -1,4 +1,5 @@
 import { getSlicePercentage } from "./plot-data.utils.js";
+import { THINNER_SLICES_ID } from "../constants.js";
 const groupSlicesThinnerThanPadAngle = (slices, padAngle) => {
   let slicesThinnerThanPadAngleValueSum = 0;
   let totalAbsoluteValueSum = 0;
@@ -21,7 +22,7 @@ const groupSlicesThinnerThanPadAngle = (slices, padAngle) => {
       category: "",
       value: slicesThinnerThanPadAngleValueSum,
       color: negativeSlicesAggregatedSliceColorToken,
-      id: "thinner-slices",
+      id: THINNER_SLICES_ID,
       relativeValue: getSlicePercentage(
         slicesThinnerThanPadAngleValueSum,
         totalAbsoluteValueSum

package/esm/charts/pie/utils/group-slices-thinner-than-pad-angle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/pie/utils/group-slices-thinner-than-pad-angle.ts"],
-  "sourcesContent": ["import { getSlicePercentage } from './plot-data.utils.js';\nimport { ColorToken } from '../../core/types/color-palette.js';\nimport { InternalSliceData } from '../types/internal/pie-chart.js';\n\nexport const groupSlicesThinnerThanPadAngle = (\n  slices: InternalSliceData[],\n  padAngle: number,\n): InternalSliceData[] => {\n  let slicesThinnerThanPadAngleValueSum = 0;\n  let totalAbsoluteValueSum = 0;\n  const newSlices: InternalSliceData[] = [];\n  const padAngleDeg = (padAngle * 180) / Math.PI;\n  for (const slice of slices) {\n    const sliceAngleDeg = (slice.relativeValue / 100) * 360;\n    if (sliceAngleDeg <= padAngleDeg) {\n      slicesThinnerThanPadAngleValueSum += slice.value;\n    } else {\n      newSlices.push(slice);\n    }\n    totalAbsoluteValueSum += slice.value;\n  }\n  if (slicesThinnerThanPadAngleValueSum > 0) {\n    const negativeSlicesAggregatedSliceColorToken: ColorToken = {\n      Default: 'transparent',\n    };\n    const negativeSlicesAggregatedSlice: InternalSliceData = {\n      category: '',\n      value: slicesThinnerThanPadAngleValueSum,\n      color: negativeSlicesAggregatedSliceColorToken,\n      id: 'thinner-slices',\n      relativeValue: getSlicePercentage(\n        slicesThinnerThanPadAngleValueSum,\n        totalAbsoluteValueSum,\n      ),\n    };\n    newSlices.push(negativeSlicesAggregatedSlice);\n  }\n  return newSlices;\n};\n"],
-  "mappings": "AAAA,SAAS,0BAA0B;AAI5B,MAAM,iCAAiC,CAC5C,QACA,aACwB;AACxB,MAAI,oCAAoC;AACxC,MAAI,wBAAwB;AAC5B,QAAM,YAAiC,CAAC;AACxC,QAAM,cAAe,WAAW,MAAO,KAAK;AAC5C,aAAW,SAAS,QAAQ;AAC1B,UAAM,gBAAiB,MAAM,gBAAgB,MAAO;AACpD,QAAI,iBAAiB,aAAa;AAChC,2CAAqC,MAAM;AAAA,IAC7C,OAAO;AACL,gBAAU,KAAK,KAAK;AAAA,IACtB;AACA,6BAAyB,MAAM;AAAA,EACjC;AACA,MAAI,oCAAoC,GAAG;AACzC,UAAM,0CAAsD;AAAA,MAC1D,SAAS;AAAA,IACX;AACA,UAAM,gCAAmD;AAAA,MACvD,UAAU;AAAA,MACV,OAAO;AAAA,MACP,OAAO;AAAA,MACP,IAAI;AAAA,MACJ,eAAe;AAAA,QACb;AAAA,QACA;AAAA,MACF;AAAA,IACF;AACA,cAAU,KAAK,6BAA6B;AAAA,EAC9C;AACA,SAAO;AACT;",
+  "sourcesContent": ["import { getSlicePercentage } from './plot-data.utils.js';\nimport { ColorToken } from '../../core/types/color-palette.js';\nimport { THINNER_SLICES_ID } from '../constants.js';\nimport { InternalSliceData } from '../types/internal/pie-chart.js';\n\nexport const groupSlicesThinnerThanPadAngle = (\n  slices: InternalSliceData[],\n  padAngle: number,\n): InternalSliceData[] => {\n  let slicesThinnerThanPadAngleValueSum = 0;\n  let totalAbsoluteValueSum = 0;\n  const newSlices: InternalSliceData[] = [];\n  const padAngleDeg = (padAngle * 180) / Math.PI;\n  for (const slice of slices) {\n    const sliceAngleDeg = (slice.relativeValue / 100) * 360;\n    if (sliceAngleDeg <= padAngleDeg) {\n      slicesThinnerThanPadAngleValueSum += slice.value;\n    } else {\n      newSlices.push(slice);\n    }\n    totalAbsoluteValueSum += slice.value;\n  }\n  if (slicesThinnerThanPadAngleValueSum > 0) {\n    const negativeSlicesAggregatedSliceColorToken: ColorToken = {\n      Default: 'transparent',\n    };\n    const negativeSlicesAggregatedSlice: InternalSliceData = {\n      category: '',\n      value: slicesThinnerThanPadAngleValueSum,\n      color: negativeSlicesAggregatedSliceColorToken,\n      id: THINNER_SLICES_ID,\n      relativeValue: getSlicePercentage(\n        slicesThinnerThanPadAngleValueSum,\n        totalAbsoluteValueSum,\n      ),\n    };\n    newSlices.push(negativeSlicesAggregatedSlice);\n  }\n  return newSlices;\n};\n"],
+  "mappings": "AAAA,SAAS,0BAA0B;AAEnC,SAAS,yBAAyB;AAG3B,MAAM,iCAAiC,CAC5C,QACA,aACwB;AACxB,MAAI,oCAAoC;AACxC,MAAI,wBAAwB;AAC5B,QAAM,YAAiC,CAAC;AACxC,QAAM,cAAe,WAAW,MAAO,KAAK;AAC5C,aAAW,SAAS,QAAQ;AAC1B,UAAM,gBAAiB,MAAM,gBAAgB,MAAO;AACpD,QAAI,iBAAiB,aAAa;AAChC,2CAAqC,MAAM;AAAA,IAC7C,OAAO;AACL,gBAAU,KAAK,KAAK;AAAA,IACtB;AACA,6BAAyB,MAAM;AAAA,EACjC;AACA,MAAI,oCAAoC,GAAG;AACzC,UAAM,0CAAsD;AAAA,MAC1D,SAAS;AAAA,IACX;AACA,UAAM,gCAAmD;AAAA,MACvD,UAAU;AAAA,MACV,OAAO;AAAA,MACP,OAAO;AAAA,MACP,IAAI;AAAA,MACJ,eAAe;AAAA,QACb;AAAA,QACA;AAAA,MACF;AAAA,IACF;AACA,cAAU,KAAK,6BAA6B;AAAA,EAC9C;AACA,SAAO;AACT;",
   "names": []
 }

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

@@ -0,0 +1,20 @@
+import { accessValue } from "../../../core/utils/accessors/access-value.js";
+function normalizePieData(input) {
+  const { data, labelAccessor, valueAccessor, unit } = input;
+  if (labelAccessor && valueAccessor) {
+    const slices = data.map((datapoint) => {
+      const color = accessValue(datapoint, "color");
+      return {
+        category: String(accessValue(datapoint, labelAccessor) ?? ""),
+        value: Number(accessValue(datapoint, valueAccessor) ?? 0),
+        ...typeof color === "string" ? { color } : {}
+      };
+    });
+    return { slices, unit };
+  }
+  return data;
+}
+export {
+  normalizePieData
+};
+//# sourceMappingURL=normalize-pie-data.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/pie/utils/normalize-pie-data.ts"],
+  "sourcesContent": ["import { accessValue } from '../../../core/utils/accessors/access-value.js';\nimport type { ChartData } from '../../core/types/chart-data.js';\nimport type { ChartUnit } from '../../core/types/chart-unit.js';\nimport type { PieChartData, SliceData } from '../types/pie-chart.config.js';\n\n/**\n * Input accepted by {@link normalizePieData}: either the unified `ChartData`\n * format (paired with `labelAccessor`/`valueAccessor` and a root-level `unit`)\n * or the legacy `PieChartData` shape.\n * @internal\n */\nexport interface NormalizePieDataInput {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  data: ChartData | PieChartData;\n  labelAccessor?: string;\n  valueAccessor?: string;\n  unit?: ChartUnit;\n}\n\n/**\n * Normalizes the public PieChart/DonutChart data props into the internal\n * `PieChartData` (`{ slices, unit }`) shape consumed by the rendering pipeline.\n *\n * When `labelAccessor`/`valueAccessor` are provided, the data is treated as the\n * unified `ChartData` array and each datapoint is mapped to a slice by resolving\n * the accessor strings (dot-notation supported). Otherwise the legacy\n * `PieChartData` is returned unchanged.\n *\n * @param input - the data-related PieChart/DonutChart props\n * @returns the internal `PieChartData` shape\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport function normalizePieData(input: NormalizePieDataInput): PieChartData {\n  const { data, labelAccessor, valueAccessor, unit } = input;\n\n  if (labelAccessor && valueAccessor) {\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    const slices: SliceData[] = (data as ChartData).map((datapoint) => {\n      const color = accessValue<string>(datapoint, 'color');\n      return {\n        category: String(accessValue<string>(datapoint, labelAccessor) ?? ''),\n        value: Number(accessValue<number>(datapoint, valueAccessor) ?? 0),\n        ...(typeof color === 'string' ? { color } : {}),\n      };\n    });\n\n    return { slices, unit };\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  return data as PieChartData;\n}\n"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAiCrB,SAAS,iBAAiB,OAA4C;AAC3E,QAAM,EAAE,MAAM,eAAe,eAAe,KAAK,IAAI;AAErD,MAAI,iBAAiB,eAAe;AAElC,UAAM,SAAuB,KAAmB,IAAI,CAAC,cAAc;AACjE,YAAM,QAAQ,YAAoB,WAAW,OAAO;AACpD,aAAO;AAAA,QACL,UAAU,OAAO,YAAoB,WAAW,aAAa,KAAK,EAAE;AAAA,QACpE,OAAO,OAAO,YAAoB,WAAW,aAAa,KAAK,CAAC;AAAA,QAChE,GAAI,OAAO,UAAU,WAAW,EAAE,MAAM,IAAI,CAAC;AAAA,MAC/C;AAAA,IACF,CAAC;AAED,WAAO,EAAE,QAAQ,KAAK;AAAA,EACxB;AAGA,SAAO;AACT;",
+  "names": []
+}

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

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