@dynatrace/strato-components 3.7.1 → 3.8.0

package/charts/pie/components/PieChartPlot/PieChartPlot.js

@@ -21,8 +21,6 @@ __export(PieChartPlot_exports, {
 });
 module.exports = __toCommonJS(PieChartPlot_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_group = require("@visx/group");
-var import_shape = require("@visx/shape");
 var import_d3_shape = require("d3-shape");
 var import_react = require("react");
 var import_PieChartPlot_css = require("./PieChartPlot.sty.js");
@@ -39,6 +37,7 @@ var import_InnerWrapper = require("../InnerWrapper/InnerWrapper.js");
 var import_PieChartLabel = require("../PieChartLabel.js");
 var import_PieChartSlice = require("../PieChartSlice.js");
 const getValue = (pieData) => pieData.relativeValue;
+const pieLayout = (0, import_d3_shape.pie)().value(getValue).padAngle(import_constants.PAD_ANGLE).sort(null);
 const PieChartPlot = (0, import_react.forwardRef)(
   (props, forwardedRef) => {
     const { variant } = props;
@@ -57,10 +56,44 @@ const PieChartPlot = (0, import_react.forwardRef)(
       !!hiddenLabels
     );
     const visibleIds = visibleSlices.map((slice) => slice.id);
+    const arcs = (0, import_react.useMemo)(() => pieLayout(visibleSlices), [visibleSlices]);
+    const pathGenerator = (0, import_react.useMemo)(
+      () => (0, import_d3_shape.arc)().innerRadius(innerRadius).outerRadius(radius),
+      [innerRadius, radius]
+    );
     const donutOverlay = (0, import_react.useMemo)(
       () => (0, import_d3_shape.arc)().innerRadius(innerRadius).outerRadius(radius).startAngle(0).endAngle(360)({}),
       [innerRadius, radius]
     );
+    const sliceRenderData = (0, import_react.useMemo)(() => {
+      let previousLabel = void 0;
+      return arcs.map((pieArc) => {
+        const label = (0, import_build_label.buildLabel)(
+          pieArc,
+          pathGenerator,
+          valueType,
+          formatter,
+          truncationMode,
+          leftCenter
+        );
+        const isHighlighted = !highlightedId || highlightedId === pieArc.data.id;
+        const showLabel = !hiddenLabels && (0, import_label_collisions.isInBounds)(label, leftCenter, topCenter) && (!previousLabel || !(0, import_label_collisions.collision)(label, previousLabel)) && pieArc.data.id !== import_constants.THINNER_SLICES_ID;
+        if (showLabel) {
+          previousLabel = label;
+        }
+        return { pieArc, label, isHighlighted, showLabel };
+      });
+    }, [
+      arcs,
+      pathGenerator,
+      valueType,
+      formatter,
+      truncationMode,
+      leftCenter,
+      highlightedId,
+      hiddenLabels,
+      topCenter
+    ]);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_PieChartPlot_css.container, ref: forwardedRef, children: [
       variant === import_constants.CHART_VARIANT.Donut && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_InnerWrapper.InnerWrapper,
@@ -72,10 +105,9 @@ const PieChartPlot = (0, import_react.forwardRef)(
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width, height, style: { overflow: "visible" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        import_group.Group,
+        "g",
         {
-          top: topCenter,
-          left: leftCenter,
+          transform: topCenter !== 0 || leftCenter !== 0 ? `translate(${leftCenter}, ${topCenter})` : void 0,
           onMouseLeave: dispatchReducer({ type: "SET_OUT_BOUNDS" }),
           children: [
             variant === import_constants.CHART_VARIANT.Pie ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -87,55 +119,28 @@ const PieChartPlot = (0, import_react.forwardRef)(
                 fill: "transparent"
               }
             ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: donutOverlay, fill: "transparent" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_shape.Pie,
-              {
-                data: visibleSlices,
-                pieValue: getValue,
-                outerRadius: radius,
-                innerRadius,
-                padAngle: import_constants.PAD_ANGLE,
-                pieSort: null,
-                children: (pie) => {
-                  let previousLabel = void 0;
-                  return pie.arcs.map((arc2) => {
-                    const label = (0, import_build_label.buildLabel)(
-                      arc2,
-                      pie.path,
-                      valueType,
-                      formatter,
-                      truncationMode,
-                      leftCenter
-                    );
-                    const isHighlighted = !highlightedId || highlightedId === arc2.data.id;
-                    const showLabel = !hiddenLabels && (0, import_label_collisions.isInBounds)(label, leftCenter, topCenter) && (!previousLabel || !(0, import_label_collisions.collision)(label, previousLabel)) && arc2.data.id !== "thinner-slices";
-                    if (showLabel) {
-                      previousLabel = label;
-                    }
-                    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        import_PieChartSlice.PieChartSlice,
-                        {
-                          sliceId: `slice-${arc2.data.id}`,
-                          arc: arc2,
-                          data: arc2.data,
-                          path: pie.path,
-                          isHighlighted
-                        }
-                      ),
-                      showLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        import_PieChartLabel.PieChartLabel,
-                        {
-                          x: label.textX,
-                          y: label.textY,
-                          text: label.text,
-                          isHighlighted
-                        }
-                      )
-                    ] }, `slice-${arc2.data.id}`);
-                  });
-                }
-              }
+            sliceRenderData.map(
+              ({ pieArc, label, isHighlighted, showLabel }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_PieChartSlice.PieChartSlice,
+                  {
+                    sliceId: `slice-${pieArc.data.id}`,
+                    arc: pieArc,
+                    data: pieArc.data,
+                    path: pathGenerator,
+                    isHighlighted
+                  }
+                ),
+                showLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_PieChartLabel.PieChartLabel,
+                  {
+                    x: label.textX,
+                    y: label.textY,
+                    text: label.text,
+                    isHighlighted
+                  }
+                )
+              ] }, `slice-${pieArc.data.id}`)
             )
           ]
         }

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

@@ -21,4 +21,4 @@ __export(PieChartPlot_css_exports, {
 });
 module.exports = __toCommonJS(PieChartPlot_css_exports);
 var import_PieChartPlot_css_ts_vanilla = require("./PieChartPlot.css");
-var container = "_1iotdmn0-3-7-1";
+var container = "_1iotdmn0-3-8-0";

package/charts/pie/components/PieChartSlice.js

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

package/charts/pie/constants.d.ts

@@ -22,3 +22,4 @@ export declare const DEFAULT_SCALE_FALLBACK_COLOR: string;
 export declare const DONUT_CHART_ARIA_LABEL = "Donut Chart";
 export declare const PIE_CHART_ARIA_LABEL = "Pie Chart";
 export declare const PAD_ANGLE = 0.01;
+export declare const THINNER_SLICES_ID = "thinner-slices";

package/charts/pie/constants.js

@@ -25,6 +25,7 @@ __export(constants_exports, {
   PAD_ANGLE: () => PAD_ANGLE,
   PIE_CHART_ARIA_LABEL: () => PIE_CHART_ARIA_LABEL,
   PIE_CHART_DISPLAY_NAME: () => PIE_CHART_DISPLAY_NAME,
+  THINNER_SLICES_ID: () => THINNER_SLICES_ID,
   THRESHOLD_TYPE_OPTION: () => THRESHOLD_TYPE_OPTION,
   TRUNCATION_MODE: () => TRUNCATION_MODE
 });
@@ -56,3 +57,4 @@ const DEFAULT_SCALE_FALLBACK_COLOR = import_constants.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";

package/charts/pie/context/ChartConfigContext.d.ts

@@ -9,6 +9,7 @@ export declare const PieChartConfigContext: import("react").Context<string | Pie
  */
 export declare const PieChartConfig: import("react").Provider<string | PieChartContextConfig>;
 /**
+ * Provider for the DonutChart API config that can be shared across charts.
  * @public
  */
 export declare const DonutChartConfig: import("react").Provider<string | PieChartContextConfig>;

package/charts/pie/hooks/useNormalizedPieData.d.ts

@@ -0,0 +1,7 @@
+import { normalizePieData } from '../utils/normalize-pie-data.js';
+import type { NormalizePieDataInput } from '../utils/normalize-pie-data.js';
+export interface NormalizedPieData {
+    normalizedData: ReturnType<typeof normalizePieData>;
+    isDataAvailable: boolean;
+}
+export declare function useNormalizedPieData({ data, labelAccessor, valueAccessor, unit, }: NormalizePieDataInput): NormalizedPieData;

package/charts/pie/hooks/useNormalizedPieData.js

@@ -0,0 +1,38 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useNormalizedPieData_exports = {};
+__export(useNormalizedPieData_exports, {
+  useNormalizedPieData: () => useNormalizedPieData
+});
+module.exports = __toCommonJS(useNormalizedPieData_exports);
+var import_lodash_es = require("lodash");
+var import_react = require("react");
+var import_normalize_pie_data = require("../utils/normalize-pie-data.js");
+function useNormalizedPieData({
+  data,
+  labelAccessor,
+  valueAccessor,
+  unit
+}) {
+  const normalizedData = (0, import_react.useMemo)(
+    () => (0, import_normalize_pie_data.normalizePieData)({ data, labelAccessor, valueAccessor, unit }),
+    [data, labelAccessor, valueAccessor, unit]
+  );
+  const isDataAvailable = normalizedData.slices !== void 0 ? !(0, import_lodash_es.isEmpty)(normalizedData.slices) : !(0, import_lodash_es.isEmpty)(data);
+  return { normalizedData, isDataAvailable };
+}

package/charts/pie/hooks/useOverlayHandlers.d.ts

@@ -1,4 +1,5 @@
+import type { PointerEvent as ReactPointerEvent } from 'react';
 export declare const useOverlayHandlers: () => {
-    onMouseEnterHandler: () => void;
-    onMouseLeaveHandler: () => void;
+    onPointerEnterHandler: () => void;
+    onPointerLeaveHandler: (event: ReactPointerEvent) => void;
 };

package/charts/pie/hooks/useOverlayHandlers.js

@@ -23,14 +23,16 @@ module.exports = __toCommonJS(useOverlayHandlers_exports);
 var import_use_set_overlay_state = require("./store/use-set-overlay-state.js");
 const useOverlayHandlers = () => {
   const { setOverlayStateInBounds } = (0, import_use_set_overlay_state.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
   };
 };

package/charts/pie/hooks/useSliceHandlers.d.ts

@@ -1,14 +1,15 @@
-import { MouseEvent as ReactMouseEvent } from 'react';
+import type { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react';
 import type { Formatter } from '../../core/types/formatter.js';
 import type { InternalSliceData } from '../types/internal/pie-chart.js';
 /**
- * Hook that generates handlers for mouse interactions.
+ * Hook that generates handlers for mouse and touch interactions.
  * @param sliceId - Id of the slice.
  * @param data - Slice data for this slice.
  * @param formatter - Formatter to be used.
- * @returns Handlers to perform mouse interactions.
+ * @returns Handlers to perform mouse and touch interactions.
  */
 export declare function useSliceHandlers(sliceId: string, data: InternalSliceData, formatter: Formatter): {
     onPointerMoveHandler: (event: ReactMouseEvent) => void;
     onMouseClickHandler: (event: ReactMouseEvent) => void;
+    onTouchEndHandler: (event: ReactTouchEvent) => void;
 };

package/charts/pie/hooks/useSliceHandlers.js

@@ -23,6 +23,7 @@ module.exports = __toCommonJS(useSliceHandlers_exports);
 var import_TooltipContext = require("../../core/components/overlay-tooltip/contexts/TooltipContext.js");
 var import_useTooltipActions = require("../../core/components/overlay-tooltip/useTooltipActions.js");
 var import_useEventErrorHandler = require("../../core/hooks/useEventErrorHandler.js");
+var import_constants = require("../constants.js");
 var import_get_tooltip_content = require("../utils/get-tooltip-content.js");
 const buildTooltipData = (sliceId, data, handlerCatch, formatter) => {
   const tooltipContent = (0, import_get_tooltip_content.getTooltipContent)(
@@ -52,7 +53,7 @@ function useSliceHandlers(sliceId, data, formatter) {
   const tooltipState = (0, import_TooltipContext.useTooltip)();
   const { hover, pin, unpin, reset } = (0, import_useTooltipActions.useTooltipActions)();
   const onPointerMoveHandler = (event) => {
-    if (tooltipState.getState().pinned || sliceId === "slice-thinner-slices") {
+    if (tooltipState.getState().pinned || sliceId === `slice-${import_constants.THINNER_SLICES_ID}`) {
       return;
     }
     const tooltipData = buildTooltipData(
@@ -65,7 +66,7 @@ function useSliceHandlers(sliceId, data, formatter) {
   };
   const onMouseClickHandler = (event) => {
     event.stopPropagation();
-    if (sliceId === "slice-thinner-slices") {
+    if (sliceId === `slice-${import_constants.THINNER_SLICES_ID}`) {
       reset();
     } else {
       const tooltipData = buildTooltipData(
@@ -82,8 +83,33 @@ function useSliceHandlers(sliceId, data, formatter) {
       }
     }
   };
+  const onTouchEndHandler = (event) => {
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+    if (sliceId === `slice-${import_constants.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
   };
 }

package/charts/pie/types/pie-chart.config.d.ts

@@ -6,18 +6,25 @@ import type { DataTestId } from '../../../core/types/data-props.js';
 import type { MaskingProps } from '../../../core/types/masking-props.js';
 import type { StylingProps } from '../../../core/types/styling-props.js';
 import type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';
+import type { ChartData } from '../../core/types/chart-data.js';
+import type { ChartUnit } from '../../core/types/chart-unit.js';
 import type { ColorPalette, CustomColorPalette } from '../../core/types/color-palette.js';
 import type { ColorRuleProps } from '../../core/types/color-rule.js';
 import type { Formatter } from '../../core/types/formatter.js';
 import type { LegendProps } from '../../core/types/legend.js';
 import type { SeriesActionsTemplate } from '../../core/types/series-actions-template.js';
 /**
+ * Unit for pie/donut chart slices.
  * @public
  * @deprecated use string or Unit type instead
  */
 export type SliceUnit = string;
 /**
+ * Legacy data format for a single pie/donut slice.
  * @public
+ * @deprecated Use the unified `ChartData` (`ChartDatapoint[]`) format together
+ * with `labelAccessor`/`valueAccessor` instead. This interface will be removed
+ * in a future release.
  */
 export interface SliceData {
     /** The category of the slice*/
@@ -32,7 +39,11 @@ export interface SliceData {
     color?: string;
 }
 /**
+ * Legacy data format for PieChart slices.
  * @public
+ * @deprecated Use the unified `ChartData` (`ChartDatapoint[]`) format together
+ * with `labelAccessor`/`valueAccessor` and the root-level `unit` prop instead.
+ * This interface will be removed in a future release.
  */
 export interface PieChartData {
     /** Slice data array */
@@ -41,13 +52,11 @@ export interface PieChartData {
     unit?: string | Unit;
 }
 /**
+ * Properties shared by both the unified `ChartData` and the legacy
+ * `PieChartData` variants of {@link PieChartProps}.
  * @public
  */
-export interface PieChartProps extends StylingProps, MaskingProps, DataTestId, BehaviorTrackingProps {
-    /**
-     * Categorical data of the chart.
-     */
-    data: PieChartData;
+export interface PieChartBaseProps extends StylingProps, MaskingProps, DataTestId, BehaviorTrackingProps {
     /**
      * The width of the chart. A number or a string with accepted CSS units is expected.
      * @defaultValue 100%
@@ -80,6 +89,46 @@ export interface PieChartProps extends StylingProps, MaskingProps, DataTestId, B
     loading?: boolean;
 }
 /**
+ * PieChart props using the unified `ChartData` format. The slice label and
+ * value are resolved from each datapoint through `labelAccessor` and
+ * `valueAccessor` (dot-notation is supported, e.g. `"metrics.value"`).
+ * @public
+ */
+export interface PieChartAccessorDataProps extends PieChartBaseProps {
+    /**
+     * Categorical data of the chart in the unified `ChartData` format.
+     */
+    data: ChartData;
+    /** Accessor describing the field that holds the slice label/category. */
+    labelAccessor: string;
+    /** Accessor describing the field that holds the slice value. */
+    valueAccessor: string;
+    /** The unit of the slices. */
+    unit?: ChartUnit;
+}
+/**
+ * PieChart props using the legacy `PieChartData` format.
+ * @public
+ * @deprecated Use the unified `ChartData` format with
+ * `labelAccessor`/`valueAccessor` instead (see {@link PieChartAccessorDataProps}).
+ */
+export interface PieChartLegacyDataProps extends PieChartBaseProps {
+    /** Categorical data of the chart.*/
+    data: PieChartData;
+    /** Not available in the legacy data format. Use `PieChartAccessorDataProps` with the unified `ChartData` format. */
+    labelAccessor?: never;
+    /** Not available in the legacy data format. Use `PieChartAccessorDataProps` with the unified `ChartData` format. */
+    valueAccessor?: never;
+    /** Not available in the legacy data format. Set the unit via `PieChartData.unit` instead. */
+    unit?: never;
+}
+/**
+ * Props for the PieChart component.
+ * @public
+ */
+export type PieChartProps = PieChartAccessorDataProps | PieChartLegacyDataProps;
+/**
+ * Configuration for the PieChart context, allowing shared config across multiple charts via {@link PieChartConfig}.
  * @public
  */
 export interface PieChartContextConfig {
@@ -128,6 +177,7 @@ export interface PieChartContextConfig {
  */
 export type DonutChartContextConfig = PieChartContextConfig;
 /**
+ * Full configuration for the PieChart component, extending {@link PieChartContextConfig} with chart dimensions.
  * @public
  */
 export interface PieChartConfiguration extends PieChartContextConfig {
@@ -232,53 +282,66 @@ export interface GroupConfig {
     threshold: ThresholdConfig;
 }
 /**
+ * Legend configuration for the PieChart component.
  * @public
  */
 export type PieChartLegendConfig = LegendProps;
 /**
+ * Legacy data format for the DonutChart component.
  * @public
+ * @deprecated Use the unified `ChartData` (`ChartDatapoint[]`) format together
+ * with `labelAccessor`/`valueAccessor` and the root-level `unit` prop instead.
+ * This type will be removed in a future release.
  */
 export type DonutChartData = PieChartData;
 /**
+ * Properties shared by both the unified `ChartData` and the legacy
+ * `DonutChartData` variants of {@link DonutChartProps}.
  * @public
  */
-export interface DonutChartProps extends StylingProps, MaskingProps, DataTestId, BehaviorTrackingProps {
+export type DonutChartBaseProps = PieChartBaseProps;
+/**
+ * DonutChart props using the unified `ChartData` format. The slice label and
+ * value are resolved from each datapoint through `labelAccessor` and
+ * `valueAccessor` (dot-notation is supported, e.g. `"metrics.value"`).
+ * @public
+ */
+export interface DonutChartAccessorDataProps extends DonutChartBaseProps {
     /**
-     * Categorical data of the chart.
+     * Categorical data of the chart in the unified `ChartData` format.
      */
+    data: ChartData;
+    /** Accessor describing the field that holds the slice label/category. */
+    labelAccessor: string;
+    /** Accessor describing the field that holds the slice value. */
+    valueAccessor: string;
+    /** The unit of the slices. */
+    unit?: ChartUnit;
+}
+/**
+ * DonutChart props using the legacy `DonutChartData` format.
+ * @public
+ * @deprecated Use the unified `ChartData` (`ChartDatapoint[]`) format together
+ * with `labelAccessor`/`valueAccessor` and the root-level `unit` prop instead.
+ * This interface will be removed in a future release.
+ */
+export interface DonutChartLegacyDataProps extends DonutChartBaseProps {
+    /** Categorical data of the chart. */
     data: DonutChartData;
-    /**
-     * The width of the chart. A number or a string with accepted CSS units is expected.
-     * @defaultValue 100%
-     */
-    width?: number | string;
-    /** The height of the chart. If a number is passed, it will be treated as px.
-     * @defaultValue 300px.
-     */
-    height?: number | string;
-    /**
-     * Set of Color palette to be used in charts.
-     * @defaultValue 'categorical'.
-     */
-    colorPalette?: ColorPalette | CustomColorPalette;
-    /**
-     * Custom Formatter for the chart
-     */
-    formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;
-    /**
-     * Truncation mode to use (start, middle, end)
-     * Applied to all the parts that truncate text.
-     * @defaultValue 'middle'
-     */
-    truncationMode?: TruncationMode;
-    /** Exposed callback to display series actions for a slice  */
-    seriesActions?: (slice: SliceData) => SeriesActionsTemplate;
-    /** Show the loading indicator when truly.
-     * @defaultValue false
-     */
-    loading?: boolean;
+    /** Not available in the legacy data format. Use `DonutChartAccessorDataProps` with the unified `ChartData` format. */
+    labelAccessor?: never;
+    /** Not available in the legacy data format. Use `DonutChartAccessorDataProps` with the unified `ChartData` format. */
+    valueAccessor?: never;
+    /** Not available in the legacy data format. Set the unit via `DonutChartData.unit` instead. */
+    unit?: never;
 }
 /**
+ * Props for the DonutChart component.
+ * @public
+ */
+export type DonutChartProps = DonutChartAccessorDataProps | DonutChartLegacyDataProps;
+/**
+ * Legend configuration for the DonutChart component.
  * @public
  */
 export type DonutChartLegendConfig = PieChartLegendConfig;
@@ -297,6 +360,7 @@ export type PieChartTooltipPayload = {
     color: string;
 };
 /**
+ * Props for a custom tooltip rendered inside the PieChart.
  * @public
  */
 export type PieChartCustomTooltipProps = {
@@ -305,6 +369,7 @@ export type PieChartCustomTooltipProps = {
     children?: (payload: PieChartTooltipPayload) => ReactNode;
 };
 /**
+ * Props for a custom tooltip rendered inside the DonutChart.
  * @public
  */
 export type DonutChartCustomTooltipProps = PieChartCustomTooltipProps;

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

@@ -21,6 +21,7 @@ __export(group_slices_thinner_than_pad_angle_exports, {
 });
 module.exports = __toCommonJS(group_slices_thinner_than_pad_angle_exports);
 var import_plot_data_utils = require("./plot-data.utils.js");
+var import_constants = require("../constants.js");
 const groupSlicesThinnerThanPadAngle = (slices, padAngle) => {
   let slicesThinnerThanPadAngleValueSum = 0;
   let totalAbsoluteValueSum = 0;
@@ -43,7 +44,7 @@ const groupSlicesThinnerThanPadAngle = (slices, padAngle) => {
       category: "",
       value: slicesThinnerThanPadAngleValueSum,
       color: negativeSlicesAggregatedSliceColorToken,
-      id: "thinner-slices",
+      id: import_constants.THINNER_SLICES_ID,
       relativeValue: (0, import_plot_data_utils.getSlicePercentage)(
         slicesThinnerThanPadAngleValueSum,
         totalAbsoluteValueSum

package/charts/pie/utils/normalize-pie-data.d.ts

@@ -0,0 +1,29 @@
+import type { ChartData } from '../../core/types/chart-data.js';
+import type { ChartUnit } from '../../core/types/chart-unit.js';
+import type { PieChartData } from '../types/pie-chart.config.js';
+/**
+ * Input accepted by {@link normalizePieData}: either the unified `ChartData`
+ * format (paired with `labelAccessor`/`valueAccessor` and a root-level `unit`)
+ * or the legacy `PieChartData` shape.
+ * @internal
+ */
+export interface NormalizePieDataInput {
+    data: ChartData | PieChartData;
+    labelAccessor?: string;
+    valueAccessor?: string;
+    unit?: ChartUnit;
+}
+/**
+ * Normalizes the public PieChart/DonutChart data props into the internal
+ * `PieChartData` (`{ slices, unit }`) shape consumed by the rendering pipeline.
+ *
+ * When `labelAccessor`/`valueAccessor` are provided, the data is treated as the
+ * unified `ChartData` array and each datapoint is mapped to a slice by resolving
+ * the accessor strings (dot-notation supported). Otherwise the legacy
+ * `PieChartData` is returned unchanged.
+ *
+ * @param input - the data-related PieChart/DonutChart props
+ * @returns the internal `PieChartData` shape
+ * @internal
+ */
+export declare function normalizePieData(input: NormalizePieDataInput): PieChartData;