@dynatrace/strato-components 3.7.1 → 3.9.0

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

@@ -1,12 +1,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Group } from "@visx/group";
-import { Pie } from "@visx/shape";
-import { arc } from "d3-shape";
+import { arc, pie } from "d3-shape";
 import { forwardRef, Fragment, useMemo } from "react";
 import { container } from "./PieChartPlot.sty.js";
 import { useGraphSize } from "../../../core/components/chart-layout/hooks/useGraphSize.js";
 import { useTooltipReducer } from "../../../core/components/overlay-tooltip/useTooltipReducer.js";
-import { CHART_VARIANT, PAD_ANGLE } from "../../constants.js";
+import {
+  CHART_VARIANT,
+  PAD_ANGLE,
+  THINNER_SLICES_ID
+} from "../../constants.js";
 import {
   useFormatter,
   useTruncationMode
@@ -23,6 +25,7 @@ import { InnerWrapper } from "../InnerWrapper/InnerWrapper.js";
 import { PieChartLabel } from "../PieChartLabel.js";
 import { PieChartSlice } from "../PieChartSlice.js";
 const getValue = (pieData) => pieData.relativeValue;
+const pieLayout = pie().value(getValue).padAngle(PAD_ANGLE).sort(null);
 const PieChartPlot = forwardRef(
   (props, forwardedRef) => {
     const { variant } = props;
@@ -41,10 +44,44 @@ const PieChartPlot = forwardRef(
       !!hiddenLabels
     );
     const visibleIds = visibleSlices.map((slice) => slice.id);
+    const arcs = useMemo(() => pieLayout(visibleSlices), [visibleSlices]);
+    const pathGenerator = useMemo(
+      () => arc().innerRadius(innerRadius).outerRadius(radius),
+      [innerRadius, radius]
+    );
     const donutOverlay = useMemo(
       () => arc().innerRadius(innerRadius).outerRadius(radius).startAngle(0).endAngle(360)({}),
       [innerRadius, radius]
     );
+    const sliceRenderData = useMemo(() => {
+      let previousLabel = void 0;
+      return arcs.map((pieArc) => {
+        const label = buildLabel(
+          pieArc,
+          pathGenerator,
+          valueType,
+          formatter,
+          truncationMode,
+          leftCenter
+        );
+        const isHighlighted = !highlightedId || highlightedId === pieArc.data.id;
+        const showLabel = !hiddenLabels && isInBounds(label, leftCenter, topCenter) && (!previousLabel || !collision(label, previousLabel)) && pieArc.data.id !== THINNER_SLICES_ID;
+        if (showLabel) {
+          previousLabel = label;
+        }
+        return { pieArc, label, isHighlighted, showLabel };
+      });
+    }, [
+      arcs,
+      pathGenerator,
+      valueType,
+      formatter,
+      truncationMode,
+      leftCenter,
+      highlightedId,
+      hiddenLabels,
+      topCenter
+    ]);
     return /* @__PURE__ */ jsxs("div", { className: container, ref: forwardedRef, children: [
       variant === CHART_VARIANT.Donut && /* @__PURE__ */ jsx(
         InnerWrapper,
@@ -56,10 +93,9 @@ const PieChartPlot = forwardRef(
         }
       ),
       /* @__PURE__ */ jsx("svg", { width, height, style: { overflow: "visible" }, children: /* @__PURE__ */ jsxs(
-        Group,
+        "g",
         {
-          top: topCenter,
-          left: leftCenter,
+          transform: topCenter !== 0 || leftCenter !== 0 ? `translate(${leftCenter}, ${topCenter})` : void 0,
           onMouseLeave: dispatchReducer({ type: "SET_OUT_BOUNDS" }),
           children: [
             variant === CHART_VARIANT.Pie ? /* @__PURE__ */ jsx(
@@ -71,55 +107,28 @@ const PieChartPlot = forwardRef(
                 fill: "transparent"
               }
             ) : /* @__PURE__ */ jsx("path", { d: donutOverlay, fill: "transparent" }),
-            /* @__PURE__ */ jsx(
-              Pie,
-              {
-                data: visibleSlices,
-                pieValue: getValue,
-                outerRadius: radius,
-                innerRadius,
-                padAngle: PAD_ANGLE,
-                pieSort: null,
-                children: (pie) => {
-                  let previousLabel = void 0;
-                  return pie.arcs.map((arc2) => {
-                    const label = buildLabel(
-                      arc2,
-                      pie.path,
-                      valueType,
-                      formatter,
-                      truncationMode,
-                      leftCenter
-                    );
-                    const isHighlighted = !highlightedId || highlightedId === arc2.data.id;
-                    const showLabel = !hiddenLabels && isInBounds(label, leftCenter, topCenter) && (!previousLabel || !collision(label, previousLabel)) && arc2.data.id !== "thinner-slices";
-                    if (showLabel) {
-                      previousLabel = label;
-                    }
-                    return /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsx(
-                        PieChartSlice,
-                        {
-                          sliceId: `slice-${arc2.data.id}`,
-                          arc: arc2,
-                          data: arc2.data,
-                          path: pie.path,
-                          isHighlighted
-                        }
-                      ),
-                      showLabel && /* @__PURE__ */ jsx(
-                        PieChartLabel,
-                        {
-                          x: label.textX,
-                          y: label.textY,
-                          text: label.text,
-                          isHighlighted
-                        }
-                      )
-                    ] }, `slice-${arc2.data.id}`);
-                  });
-                }
-              }
+            sliceRenderData.map(
+              ({ pieArc, label, isHighlighted, showLabel }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  PieChartSlice,
+                  {
+                    sliceId: `slice-${pieArc.data.id}`,
+                    arc: pieArc,
+                    data: pieArc.data,
+                    path: pathGenerator,
+                    isHighlighted
+                  }
+                ),
+                showLabel && /* @__PURE__ */ jsx(
+                  PieChartLabel,
+                  {
+                    x: label.textX,
+                    y: label.textY,
+                    text: label.text,
+                    isHighlighted
+                  }
+                )
+              ] }, `slice-${pieArc.data.id}`)
             )
           ]
         }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/pie/components/PieChartPlot/PieChartPlot.tsx"],
-  "sourcesContent": ["import { Group } from '@visx/group';\nimport { Pie } from '@visx/shape';\nimport { arc, DefaultArcObject } from 'd3-shape';\nimport { forwardRef, Fragment, useMemo } from 'react';\n\nimport { container } from './PieChartPlot.sty.js';\nimport { useGraphSize } from '../../../core/components/chart-layout/hooks/useGraphSize.js';\nimport { useTooltipReducer } from '../../../core/components/overlay-tooltip/useTooltipReducer.js';\nimport { CHART_VARIANT, PAD_ANGLE } from '../../constants.js';\nimport {\n  useFormatter,\n  useTruncationMode,\n} from '../../context/FormatterContext.js';\nimport { useLabels } from '../../context/LabelsContext.js';\nimport {\n  useHighlightedIdState,\n  useVisibleSlicesState,\n} from '../../hooks/store/selectors.js';\nimport {\n  type ChartVariant,\n  type InternalLabel,\n  InternalSliceData,\n} from '../../types/internal/pie-chart.js';\nimport { PieChartProps } from '../../types/pie-chart.config.js';\nimport { buildChartSizes } from '../../utils/build-chart-sizes.js';\nimport { buildLabel } from '../../utils/build-label.js';\nimport { collision, isInBounds } from '../../utils/label-collisions.js';\nimport { InnerWrapper } from '../InnerWrapper/InnerWrapper.js';\nimport { PieChartLabel } from '../PieChartLabel.js';\nimport { PieChartSlice } from '../PieChartSlice.js';\n\ntype PieChartPlotProps = Omit<PieChartProps, 'data'> & {\n  variant: ChartVariant;\n};\n\nconst getValue = (pieData: InternalSliceData) => pieData.relativeValue;\n\nexport const PieChartPlot = forwardRef<HTMLDivElement, PieChartPlotProps>(\n  (props, forwardedRef) => {\n    const { variant } = props;\n    const dispatchReducer = useTooltipReducer();\n    const visibleSlices = useVisibleSlicesState();\n    const highlightedId = useHighlightedIdState();\n    const { height, width } = useGraphSize();\n    const { hidden: hiddenLabels, valueType } = useLabels();\n    const formatter = useFormatter();\n    const truncationMode = useTruncationMode();\n    const { topCenter, radius, leftCenter, innerRadius } = buildChartSizes(\n      height,\n      width,\n      variant,\n      visibleSlices,\n      !!hiddenLabels,\n    );\n\n    const visibleIds = visibleSlices.map((slice) => slice.id);\n\n    const donutOverlay = useMemo(\n      () =>\n        arc()\n          .innerRadius(innerRadius)\n          .outerRadius(radius)\n          .startAngle(0)\n          .endAngle(360)({} as DefaultArcObject),\n      [innerRadius, radius],\n    ) as string | undefined;\n\n    return (\n      <div className={container} ref={forwardedRef}>\n        {variant === CHART_VARIANT.Donut && (\n          <InnerWrapper\n            width={width}\n            height={height}\n            innerRadius={innerRadius}\n            visibleIds={visibleIds}\n          />\n        )}\n\n        <svg width={width} height={height} style={{ overflow: 'visible' }}>\n          <Group\n            top={topCenter}\n            left={leftCenter}\n            onMouseLeave={dispatchReducer({ type: 'SET_OUT_BOUNDS' })}\n          >\n            {variant === CHART_VARIANT.Pie ? (\n              <circle\n                cx=\"0\"\n                cy=\"0\"\n                r={radius > 0 ? radius : 0}\n                fill=\"transparent\"\n              />\n            ) : (\n              <path d={donutOverlay} fill=\"transparent\" />\n            )}\n\n            <Pie\n              data={visibleSlices}\n              pieValue={getValue}\n              outerRadius={radius}\n              innerRadius={innerRadius}\n              padAngle={PAD_ANGLE}\n              pieSort={null}\n            >\n              {(pie) => {\n                let previousLabel: InternalLabel | undefined = undefined;\n\n                return pie.arcs.map((arc) => {\n                  const label = buildLabel(\n                    arc,\n                    pie.path,\n                    valueType,\n                    formatter,\n                    truncationMode,\n                    leftCenter,\n                  );\n\n                  const isHighlighted =\n                    !highlightedId || highlightedId === arc.data.id;\n\n                  const showLabel =\n                    !hiddenLabels &&\n                    isInBounds(label, leftCenter, topCenter) &&\n                    (!previousLabel || !collision(label, previousLabel)) &&\n                    arc.data.id !== 'thinner-slices';\n\n                  if (showLabel) {\n                    previousLabel = label;\n                  }\n\n                  return (\n                    <Fragment key={`slice-${arc.data.id}`}>\n                      <PieChartSlice\n                        sliceId={`slice-${arc.data.id}`}\n                        arc={arc}\n                        data={arc.data}\n                        path={pie.path}\n                        isHighlighted={isHighlighted}\n                      />\n                      {showLabel && (\n                        <PieChartLabel\n                          x={label.textX}\n                          y={label.textY}\n                          text={label.text}\n                          isHighlighted={isHighlighted}\n                        />\n                      )}\n                    </Fragment>\n                  );\n                });\n              }}\n            </Pie>\n          </Group>\n        </svg>\n      </div>\n    );\n  },\n);\n"],
-  "mappings": "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",
-  "names": ["arc"]
+  "sourcesContent": ["import { arc, type DefaultArcObject, type PieArcDatum, pie } from 'd3-shape';\nimport { forwardRef, Fragment, useMemo } from 'react';\n\nimport { container } from './PieChartPlot.sty.js';\nimport { useGraphSize } from '../../../core/components/chart-layout/hooks/useGraphSize.js';\nimport { useTooltipReducer } from '../../../core/components/overlay-tooltip/useTooltipReducer.js';\nimport {\n  CHART_VARIANT,\n  PAD_ANGLE,\n  THINNER_SLICES_ID,\n} from '../../constants.js';\nimport {\n  useFormatter,\n  useTruncationMode,\n} from '../../context/FormatterContext.js';\nimport { useLabels } from '../../context/LabelsContext.js';\nimport {\n  useHighlightedIdState,\n  useVisibleSlicesState,\n} from '../../hooks/store/selectors.js';\nimport {\n  type ChartVariant,\n  type InternalLabel,\n  InternalSliceData,\n} from '../../types/internal/pie-chart.js';\nimport { PieChartProps } from '../../types/pie-chart.config.js';\nimport { buildChartSizes } from '../../utils/build-chart-sizes.js';\nimport { buildLabel } from '../../utils/build-label.js';\nimport { collision, isInBounds } from '../../utils/label-collisions.js';\nimport { InnerWrapper } from '../InnerWrapper/InnerWrapper.js';\nimport { PieChartLabel } from '../PieChartLabel.js';\nimport { PieChartSlice } from '../PieChartSlice.js';\n\ntype PieChartPlotProps = Omit<PieChartProps, 'data'> & {\n  variant: ChartVariant;\n};\n\nconst getValue = (pieData: InternalSliceData) => pieData.relativeValue;\n\nconst pieLayout = pie<InternalSliceData>()\n  .value(getValue)\n  .padAngle(PAD_ANGLE)\n  .sort(null);\n\nexport const PieChartPlot = forwardRef<HTMLDivElement, PieChartPlotProps>(\n  (props, forwardedRef) => {\n    const { variant } = props;\n    const dispatchReducer = useTooltipReducer();\n    const visibleSlices = useVisibleSlicesState();\n    const highlightedId = useHighlightedIdState();\n    const { height, width } = useGraphSize();\n    const { hidden: hiddenLabels, valueType } = useLabels();\n    const formatter = useFormatter();\n    const truncationMode = useTruncationMode();\n    const { topCenter, radius, leftCenter, innerRadius } = buildChartSizes(\n      height,\n      width,\n      variant,\n      visibleSlices,\n      !!hiddenLabels,\n    );\n\n    const visibleIds = visibleSlices.map((slice) => slice.id);\n\n    const arcs = useMemo(() => pieLayout(visibleSlices), [visibleSlices]);\n\n    const pathGenerator = useMemo(\n      () =>\n        arc<PieArcDatum<InternalSliceData>>()\n          .innerRadius(innerRadius)\n          .outerRadius(radius),\n      [innerRadius, radius],\n    );\n\n    const donutOverlay = useMemo(\n      () =>\n        arc()\n          .innerRadius(innerRadius)\n          .outerRadius(radius)\n          .startAngle(0)\n          .endAngle(360)({} as DefaultArcObject),\n      [innerRadius, radius],\n    ) as string | undefined;\n\n    const sliceRenderData = useMemo(() => {\n      let previousLabel: InternalLabel | undefined = undefined;\n\n      return arcs.map((pieArc) => {\n        const label = buildLabel(\n          pieArc,\n          pathGenerator,\n          valueType,\n          formatter,\n          truncationMode,\n          leftCenter,\n        );\n\n        const isHighlighted =\n          !highlightedId || highlightedId === pieArc.data.id;\n\n        const showLabel =\n          !hiddenLabels &&\n          isInBounds(label, leftCenter, topCenter) &&\n          (!previousLabel || !collision(label, previousLabel)) &&\n          pieArc.data.id !== THINNER_SLICES_ID;\n\n        if (showLabel) {\n          previousLabel = label;\n        }\n\n        return { pieArc, label, isHighlighted, showLabel };\n      });\n    }, [\n      arcs,\n      pathGenerator,\n      valueType,\n      formatter,\n      truncationMode,\n      leftCenter,\n      highlightedId,\n      hiddenLabels,\n      topCenter,\n    ]);\n\n    return (\n      <div className={container} ref={forwardedRef}>\n        {variant === CHART_VARIANT.Donut && (\n          <InnerWrapper\n            width={width}\n            height={height}\n            innerRadius={innerRadius}\n            visibleIds={visibleIds}\n          />\n        )}\n\n        <svg width={width} height={height} style={{ overflow: 'visible' }}>\n          <g\n            transform={\n              topCenter !== 0 || leftCenter !== 0\n                ? `translate(${leftCenter}, ${topCenter})`\n                : undefined\n            }\n            onMouseLeave={dispatchReducer({ type: 'SET_OUT_BOUNDS' })}\n          >\n            {variant === CHART_VARIANT.Pie ? (\n              <circle\n                cx=\"0\"\n                cy=\"0\"\n                r={radius > 0 ? radius : 0}\n                fill=\"transparent\"\n              />\n            ) : (\n              <path d={donutOverlay} fill=\"transparent\" />\n            )}\n\n            {sliceRenderData.map(\n              ({ pieArc, label, isHighlighted, showLabel }) => (\n                <Fragment key={`slice-${pieArc.data.id}`}>\n                  <PieChartSlice\n                    sliceId={`slice-${pieArc.data.id}`}\n                    arc={pieArc}\n                    data={pieArc.data}\n                    path={pathGenerator}\n                    isHighlighted={isHighlighted}\n                  />\n                  {showLabel && (\n                    <PieChartLabel\n                      x={label.textX}\n                      y={label.textY}\n                      text={label.text}\n                      isHighlighted={isHighlighted}\n                    />\n                  )}\n                </Fragment>\n              ),\n            )}\n          </g>\n        </svg>\n      </div>\n    );\n  },\n);\n"],
+  "mappings": "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",
+  "names": []
 }

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

@@ -1,5 +1,5 @@
 import "./PieChartPlot.css";
-var container = "_1iotdmn0-3-7-1";
+var container = "_1iotdmn0-3-9-0";
 export {
   container
 };

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-1';"],
+  "sourcesContent": ["import './PieChartPlot.css';\nexport var container = '_1iotdmn0-3-9-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/components/PieChartTooltip/PieChartTooltip.js

@@ -29,7 +29,7 @@ const PieChartTooltip = () => {
       percentage: currentSeries.relativeValue,
       color: currentSeries.color
     };
-    return /* @__PURE__ */ jsx(OverlayTooltip, { legacyTemplate: customTooltip.template(payload) });
+    return /* @__PURE__ */ jsx(OverlayTooltip, { template: customTooltip.template(payload) });
   }
   const tooltipItem = currentSeries ? {
     id: metadata?.sliceId ?? fallbackSeriesId,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/pie/components/PieChartTooltip/PieChartTooltip.tsx"],
-  "sourcesContent": ["import { OverlayTooltip } from '../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport { useSelector as useOverlayTooltipSelector } from '../../../core/components/overlay-tooltip/selectors.js';\nimport { isTooltipDataEmpty } from '../../../core/components/overlay-tooltip/utils.js';\nimport { useTooltipSeriesActions } from '../../../core/components/tooltip/shared/hooks/useTooltipSeriesActions.js';\nimport type { SeriesActionsTemplate } from '../../../core/types/series-actions-template.js';\nimport { type TooltipItem } from '../../../core/types/tooltip.js';\nimport { useVisibleSlicesState } from '../../hooks/store/selectors.js';\nimport { usePieChartTooltip } from '../../hooks/usePieChartTooltip.js';\nimport type { InternalSliceData } from '../../types/internal/pie-chart.js';\nimport type { PieChartTooltipPayload } from '../../types/pie-chart.config.js';\n\nexport const PieChartTooltip = () => {\n  const customTooltip = usePieChartTooltip();\n  const overlayTooltipPinned = useOverlayTooltipSelector(\n    (state) => state.pinned,\n  );\n  const overlayData = useOverlayTooltipSelector((state) => state.data);\n  const visibleSlices = useVisibleSlicesState();\n\n  const seriesActions = useTooltipSeriesActions<InternalSliceData>(\n    visibleSlices,\n    (slice) => slice.id,\n  );\n\n  if (customTooltip?.hidden || isTooltipDataEmpty(overlayData)) {\n    return null;\n  }\n\n  const metadata = overlayData.metadata as { sliceId?: string } | undefined;\n  const currentSeries = overlayData.series[0];\n  const fallbackSeriesId =\n    typeof currentSeries.name === 'string' ? currentSeries.name : '';\n\n  if (customTooltip?.template) {\n    const payload: PieChartTooltipPayload = {\n      category:\n        typeof currentSeries.name === 'string' ? currentSeries.name : '',\n      value: currentSeries.value as string | number,\n      percentage: currentSeries.relativeValue as number,\n      color: currentSeries.color,\n    };\n\n    return <OverlayTooltip legacyTemplate={customTooltip.template(payload)} />;\n  }\n\n  const tooltipItem: TooltipItem | undefined = currentSeries\n    ? {\n        id: metadata?.sliceId ?? fallbackSeriesId,\n        name: currentSeries.name,\n        color: { Default: currentSeries.color },\n        values: [\n          currentSeries.value?.toString() || '',\n          currentSeries.relativeValue?.toString() || '',\n        ] as string[],\n      }\n    : undefined;\n\n  const actions = (\n    overlayTooltipPinned && tooltipItem\n      ? () => seriesActions(tooltipItem)\n      : undefined\n  ) as (() => SeriesActionsTemplate) | undefined;\n\n  return (\n    <OverlayTooltip>\n      <OverlayTooltip.SeriesItem\n        name={currentSeries.name}\n        value={currentSeries.value as string | number}\n        color={currentSeries.color}\n        relativeValue={currentSeries.relativeValue}\n        relativeValueUnit={currentSeries.relativeValueUnit}\n        actions={actions}\n      />\n    </OverlayTooltip>\n  );\n};\n"],
-  "mappings": "AA0CW;AA1CX,SAAS,sBAAsB;AAC/B,SAAS,eAAe,iCAAiC;AACzD,SAAS,0BAA0B;AACnC,SAAS,+BAA+B;AAGxC,SAAS,6BAA6B;AACtC,SAAS,0BAA0B;AAI5B,MAAM,kBAAkB,MAAM;AACnC,QAAM,gBAAgB,mBAAmB;AACzC,QAAM,uBAAuB;AAAA,IAC3B,CAAC,UAAU,MAAM;AAAA,EACnB;AACA,QAAM,cAAc,0BAA0B,CAAC,UAAU,MAAM,IAAI;AACnE,QAAM,gBAAgB,sBAAsB;AAE5C,QAAM,gBAAgB;AAAA,IACpB;AAAA,IACA,CAAC,UAAU,MAAM;AAAA,EACnB;AAEA,MAAI,eAAe,UAAU,mBAAmB,WAAW,GAAG;AAC5D,WAAO;AAAA,EACT;AAEA,QAAM,WAAW,YAAY;AAC7B,QAAM,gBAAgB,YAAY,OAAO,CAAC;AAC1C,QAAM,mBACJ,OAAO,cAAc,SAAS,WAAW,cAAc,OAAO;AAEhE,MAAI,eAAe,UAAU;AAC3B,UAAM,UAAkC;AAAA,MACtC,UACE,OAAO,cAAc,SAAS,WAAW,cAAc,OAAO;AAAA,MAChE,OAAO,cAAc;AAAA,MACrB,YAAY,cAAc;AAAA,MAC1B,OAAO,cAAc;AAAA,IACvB;AAEA,WAAO,oBAAC,kBAAe,gBAAgB,cAAc,SAAS,OAAO,GAAG;AAAA,EAC1E;AAEA,QAAM,cAAuC,gBACzC;AAAA,IACE,IAAI,UAAU,WAAW;AAAA,IACzB,MAAM,cAAc;AAAA,IACpB,OAAO,EAAE,SAAS,cAAc,MAAM;AAAA,IACtC,QAAQ;AAAA,MACN,cAAc,OAAO,SAAS,KAAK;AAAA,MACnC,cAAc,eAAe,SAAS,KAAK;AAAA,IAC7C;AAAA,EACF,IACA;AAEJ,QAAM,UACJ,wBAAwB,cACpB,MAAM,cAAc,WAAW,IAC/B;AAGN,SACE,oBAAC,kBACC;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC,MAAM,cAAc;AAAA,MACpB,OAAO,cAAc;AAAA,MACrB,OAAO,cAAc;AAAA,MACrB,eAAe,cAAc;AAAA,MAC7B,mBAAmB,cAAc;AAAA,MACjC;AAAA;AAAA,EACF,GACF;AAEJ;",
+  "sourcesContent": ["import { OverlayTooltip } from '../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport { useSelector as useOverlayTooltipSelector } from '../../../core/components/overlay-tooltip/selectors.js';\nimport { isTooltipDataEmpty } from '../../../core/components/overlay-tooltip/utils.js';\nimport { useTooltipSeriesActions } from '../../../core/components/tooltip/shared/hooks/useTooltipSeriesActions.js';\nimport type { SeriesActionsTemplate } from '../../../core/types/series-actions-template.js';\nimport { type TooltipItem } from '../../../core/types/tooltip.js';\nimport { useVisibleSlicesState } from '../../hooks/store/selectors.js';\nimport { usePieChartTooltip } from '../../hooks/usePieChartTooltip.js';\nimport type { InternalSliceData } from '../../types/internal/pie-chart.js';\nimport type { PieChartTooltipPayload } from '../../types/pie-chart.config.js';\n\nexport const PieChartTooltip = () => {\n  const customTooltip = usePieChartTooltip();\n  const overlayTooltipPinned = useOverlayTooltipSelector(\n    (state) => state.pinned,\n  );\n  const overlayData = useOverlayTooltipSelector((state) => state.data);\n  const visibleSlices = useVisibleSlicesState();\n\n  const seriesActions = useTooltipSeriesActions<InternalSliceData>(\n    visibleSlices,\n    (slice) => slice.id,\n  );\n\n  if (customTooltip?.hidden || isTooltipDataEmpty(overlayData)) {\n    return null;\n  }\n\n  const metadata = overlayData.metadata as { sliceId?: string } | undefined;\n  const currentSeries = overlayData.series[0];\n  const fallbackSeriesId =\n    typeof currentSeries.name === 'string' ? currentSeries.name : '';\n\n  if (customTooltip?.template) {\n    const payload: PieChartTooltipPayload = {\n      category:\n        typeof currentSeries.name === 'string' ? currentSeries.name : '',\n      value: currentSeries.value as string | number,\n      percentage: currentSeries.relativeValue as number,\n      color: currentSeries.color,\n    };\n\n    return <OverlayTooltip template={customTooltip.template(payload)} />;\n  }\n\n  const tooltipItem: TooltipItem | undefined = currentSeries\n    ? {\n        id: metadata?.sliceId ?? fallbackSeriesId,\n        name: currentSeries.name,\n        color: { Default: currentSeries.color },\n        values: [\n          currentSeries.value?.toString() || '',\n          currentSeries.relativeValue?.toString() || '',\n        ] as string[],\n      }\n    : undefined;\n\n  const actions = (\n    overlayTooltipPinned && tooltipItem\n      ? () => seriesActions(tooltipItem)\n      : undefined\n  ) as (() => SeriesActionsTemplate) | undefined;\n\n  return (\n    <OverlayTooltip>\n      <OverlayTooltip.SeriesItem\n        name={currentSeries.name}\n        value={currentSeries.value as string | number}\n        color={currentSeries.color}\n        relativeValue={currentSeries.relativeValue}\n        relativeValueUnit={currentSeries.relativeValueUnit}\n        actions={actions}\n      />\n    </OverlayTooltip>\n  );\n};\n"],
+  "mappings": "AA0CW;AA1CX,SAAS,sBAAsB;AAC/B,SAAS,eAAe,iCAAiC;AACzD,SAAS,0BAA0B;AACnC,SAAS,+BAA+B;AAGxC,SAAS,6BAA6B;AACtC,SAAS,0BAA0B;AAI5B,MAAM,kBAAkB,MAAM;AACnC,QAAM,gBAAgB,mBAAmB;AACzC,QAAM,uBAAuB;AAAA,IAC3B,CAAC,UAAU,MAAM;AAAA,EACnB;AACA,QAAM,cAAc,0BAA0B,CAAC,UAAU,MAAM,IAAI;AACnE,QAAM,gBAAgB,sBAAsB;AAE5C,QAAM,gBAAgB;AAAA,IACpB;AAAA,IACA,CAAC,UAAU,MAAM;AAAA,EACnB;AAEA,MAAI,eAAe,UAAU,mBAAmB,WAAW,GAAG;AAC5D,WAAO;AAAA,EACT;AAEA,QAAM,WAAW,YAAY;AAC7B,QAAM,gBAAgB,YAAY,OAAO,CAAC;AAC1C,QAAM,mBACJ,OAAO,cAAc,SAAS,WAAW,cAAc,OAAO;AAEhE,MAAI,eAAe,UAAU;AAC3B,UAAM,UAAkC;AAAA,MACtC,UACE,OAAO,cAAc,SAAS,WAAW,cAAc,OAAO;AAAA,MAChE,OAAO,cAAc;AAAA,MACrB,YAAY,cAAc;AAAA,MAC1B,OAAO,cAAc;AAAA,IACvB;AAEA,WAAO,oBAAC,kBAAe,UAAU,cAAc,SAAS,OAAO,GAAG;AAAA,EACpE;AAEA,QAAM,cAAuC,gBACzC;AAAA,IACE,IAAI,UAAU,WAAW;AAAA,IACzB,MAAM,cAAc;AAAA,IACpB,OAAO,EAAE,SAAS,cAAc,MAAM;AAAA,IACtC,QAAQ;AAAA,MACN,cAAc,OAAO,SAAS,KAAK;AAAA,MACnC,cAAc,eAAe,SAAS,KAAK;AAAA,IAC7C;AAAA,EACF,IACA;AAEJ,QAAM,UACJ,wBAAwB,cACpB,MAAM,cAAc,WAAW,IAC/B;AAGN,SACE,oBAAC,kBACC;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC,MAAM,cAAc;AAAA,MACpB,OAAO,cAAc;AAAA,MACrB,OAAO,cAAc;AAAA,MACrB,eAAe,cAAc;AAAA,MAC7B,mBAAmB,cAAc;AAAA,MACjC;AAAA;AAAA,EACF,GACF;AAEJ;",
   "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": []
 }