@dynatrace/strato-components 3.7.1 → 3.8.0

package/esm/charts/meter-bar/shared/styles.sty.js

@@ -1,6 +1,6 @@
 import "./styles.css";
 var consumerLoadingStyle = { position: "absolute", top: 0, width: "100%", height: "100%", zIndex: 1, pointerEvents: "none", backgroundColor: "var(--dt-colors-background-base-default, #f9f9fa)", opacity: 0.4 };
-var container = "_16sdwow0-3-7-1";
+var container = "_16sdwow0-3-8-0";
 export {
   consumerLoadingStyle,
   container

package/esm/charts/meter-bar/shared/styles.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/meter-bar/shared/styles.css.ts"],
-  "sourcesContent": ["import './styles.css';\nexport var consumerLoadingStyle = {position:'absolute',top:0,width:'100%',height:'100%',zIndex:1,pointerEvents:'none',backgroundColor:'var(--dt-colors-background-base-default, #f9f9fa)',opacity:0.4};\nexport var container = '_16sdwow0-3-7-1';"],
+  "sourcesContent": ["import './styles.css';\nexport var consumerLoadingStyle = {position:'absolute',top:0,width:'100%',height:'100%',zIndex:1,pointerEvents:'none',backgroundColor:'var(--dt-colors-background-base-default, #f9f9fa)',opacity:0.4};\nexport var container = '_16sdwow0-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,uBAAuB,EAAC,UAAS,YAAW,KAAI,GAAE,OAAM,QAAO,QAAO,QAAO,QAAO,GAAE,eAAc,QAAO,iBAAgB,qDAAoD,SAAQ,IAAG;AAC9L,IAAI,YAAY;",
   "names": []
 }

package/esm/charts/meter-bar/single-meter-bar/components/MeterBarChartThresholds/MeterBarChartThresholds.css

@@ -1,4 +1,4 @@
-._1kt6hkd0-3-7-1 {
+._1kt6hkd0-3-8-0 {
   width: 100%;
   position: absolute;
   top: -4px;

package/esm/charts/meter-bar/single-meter-bar/components/MeterBarChartThresholds/MeterBarChartThresholds.sty.js

@@ -1,5 +1,5 @@
 import "./MeterBarChartThresholds.css";
-var thresholdContainer = "_1kt6hkd0-3-7-1";
+var thresholdContainer = "_1kt6hkd0-3-8-0";
 export {
   thresholdContainer
 };

package/esm/charts/meter-bar/single-meter-bar/components/MeterBarChartThresholds/MeterBarChartThresholds.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/meter-bar/single-meter-bar/components/MeterBarChartThresholds/MeterBarChartThresholds.css.ts"],
-  "sourcesContent": ["import './MeterBarChartThresholds.css';\nexport var thresholdContainer = '_1kt6hkd0-3-7-1';"],
+  "sourcesContent": ["import './MeterBarChartThresholds.css';\nexport var thresholdContainer = '_1kt6hkd0-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;",
   "names": []
 }

package/esm/charts/pie/DonutChart.js

@@ -1,6 +1,5 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
-import { isEmpty } from "lodash-es";
 import {
   forwardRef,
   useImperativeHandle,
@@ -13,6 +12,7 @@ import {
   DONUT_CHART_DISPLAY_NAME
 } from "./constants.js";
 import { InnerElementContext } from "./context/InnerElementContext.js";
+import { useNormalizedPieData } from "./hooks/useNormalizedPieData.js";
 import { usePieChartConfig } from "./hooks/usePieChartConfig.js";
 import {
   ChartProviders
@@ -25,23 +25,16 @@ import { Labels as DonutChartLabels } from "./slots/DonutChartLabels.js";
 import { Legend as DonutChartLegend } from "./slots/DonutChartLegend.js";
 import { Tooltip as DonutChartTooltipSlot } from "./slots/DonutChartTooltip.js";
 import { buildAndDownloadCsv } from "./utils/build-and-download-csv.js";
+import { sanitizeToolbarIntents } from "./utils/sanitize-toolbar-intents.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
 import { Intent } from "../../core/slots/Intent/Intent.js";
 import { defaultChartSize } from "../../core/styles/defaultChartValues.sty.js";
 import { getChartStatesTemplates } from "../core/components/chart-states/utils/get-chart-states-template.js";
-import { getToolbarConfigWithoutIntents } from "../core/components/toolbar/utils/get-toolbar-config-without-intents.js";
 import { EmptyStateSlot } from "../core/slots/chart-states/EmptyStateSlot.js";
 import { ErrorStateSlot } from "../core/slots/chart-states/ErrorStateSlot.js";
 import { ColorRule } from "../core/slots/ColorRule.js";
 import { ChartType } from "../core/types/chart-types.js";
 const COMPONENT_NAME = "DonutChart";
-const sanitizeToolbarIntents = (config) => {
-  const toolbar = config.toolbar ? getToolbarConfigWithoutIntents(config.toolbar) : void 0;
-  return {
-    ...config,
-    toolbar
-  };
-};
 const DonutChartRoot = forwardRef((props, forwardedRef) => {
   const {
     className,
@@ -52,7 +45,7 @@ const DonutChartRoot = forwardRef((props, forwardedRef) => {
   } = props;
   const chartConfig = usePieChartConfig(props);
   const { emptyState, errorState } = getChartStatesTemplates(props.children);
-  const isDataAvailable = !isEmpty(props.data);
+  const { normalizedData, isDataAvailable } = useNormalizedPieData(props);
   const containerRef = useRef(null);
   const rootRef = useMergeRefs([
     forwardedRef,
@@ -67,12 +60,12 @@ const DonutChartRoot = forwardRef((props, forwardedRef) => {
         ...sanitizeToolbarIntents(chartConfig)
       }),
       downloadData: () => {
-        buildAndDownloadCsv(props.data);
+        buildAndDownloadCsv(normalizedData);
       }
     })
   );
   const providersProps = {
-    chartData: props.data,
+    chartData: normalizedData,
     chartConfig
   };
   return /* @__PURE__ */ jsx(

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/pie/DonutChart.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { isEmpty } from 'lodash-es';\nimport {\n  forwardRef,\n  type PropsWithChildren,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { PieChartInternal } from './components/PieChartInternal.js';\nimport {\n  CHART_VARIANT,\n  DONUT_CHART_ARIA_LABEL,\n  DONUT_CHART_DISPLAY_NAME,\n} from './constants.js';\nimport { InnerElementContext } from './context/InnerElementContext.js';\nimport { usePieChartConfig } from './hooks/usePieChartConfig.js';\nimport {\n  ChartProviders,\n  type ChartProvidersProps,\n} from './providers/ChartProviders.js';\nimport { Toolbar } from './shared/slots/Toolbar.js';\nimport { DonutChartDownloadCSVSlot } from './slots/DonutChartDownloadCSV.js';\nimport { Grouping as DonutChartGrouping } from './slots/DonutChartGrouping.js';\nimport { DonutChartInner } from './slots/DonutChartInner.js';\nimport { Labels as DonutChartLabels } from './slots/DonutChartLabels.js';\nimport { Legend as DonutChartLegend } from './slots/DonutChartLegend.js';\nimport { Tooltip as DonutChartTooltipSlot } from './slots/DonutChartTooltip.js';\nimport type { DonutChartRef, PieChartRef } from './types/pie-chart-ref.js';\nimport type {\n  DonutChartProps,\n  PieDonutConfig,\n} from './types/pie-chart.config.js';\nimport { buildAndDownloadCsv } from './utils/build-and-download-csv.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { Intent } from '../../core/slots/Intent/Intent.js';\nimport { defaultChartSize } from '../../core/styles/defaultChartValues.sty.js';\nimport { getChartStatesTemplates } from '../core/components/chart-states/utils/get-chart-states-template.js';\nimport { getToolbarConfigWithoutIntents } from '../core/components/toolbar/utils/get-toolbar-config-without-intents.js';\nimport { EmptyStateSlot } from '../core/slots/chart-states/EmptyStateSlot.js';\nimport { ErrorStateSlot } from '../core/slots/chart-states/ErrorStateSlot.js';\nimport { ColorRule } from '../core/slots/ColorRule.js';\nimport { ChartType } from '../core/types/chart-types.js';\n\nconst COMPONENT_NAME = 'DonutChart';\n\nconst sanitizeToolbarIntents = (config: PieDonutConfig): PieDonutConfig => {\n  const toolbar = config.toolbar\n    ? getToolbarConfigWithoutIntents(config.toolbar)\n    : undefined;\n\n  return {\n    ...config,\n    toolbar,\n  };\n};\n\nconst DonutChartRoot = forwardRef<\n  DonutChartRef,\n  PropsWithChildren<DonutChartProps>\n>((props, forwardedRef) => {\n  const {\n    className,\n    style,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId = 'donut-chart-root',\n  } = props;\n\n  const chartConfig = usePieChartConfig(props);\n  const { emptyState, errorState } = getChartStatesTemplates(props.children);\n\n  const isDataAvailable = !isEmpty(props.data);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const rootRef = useMergeRefs<PieChartRef | HTMLDivElement>([\n    forwardedRef,\n    containerRef,\n  ]);\n\n  useImperativeHandle(\n    forwardedRef,\n    (): DonutChartRef => ({\n      element: containerRef.current,\n      getConfig: () =>\n        JSON.stringify({\n          type: ChartType.Donut,\n          ...sanitizeToolbarIntents(chartConfig),\n        }),\n      downloadData: () => {\n        buildAndDownloadCsv(props.data);\n      },\n    }),\n  );\n\n  const providersProps: ChartProvidersProps = {\n    chartData: props.data,\n    chartConfig,\n  };\n\n  return (\n    <InnerElementContext.Provider\n      value={{\n        innerElement: chartConfig.innerElement,\n      }}\n    >\n      <ChartProviders {...providersProps}>\n        <PieChartInternal\n          {...props}\n          ref={rootRef}\n          variant={CHART_VARIANT.Donut}\n          isEmpty={!isDataAvailable}\n          emptyState={emptyState}\n          errorState={errorState}\n          className={clsx(defaultChartSize, className)}\n          style={style}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n          data-testid={dataTestId}\n          data-dt-component={COMPONENT_NAME}\n          aria-label={DONUT_CHART_ARIA_LABEL}\n          role=\"img\"\n        />\n      </ChartProviders>\n    </InnerElementContext.Provider>\n  );\n});\n\n(\n  DonutChartRoot as typeof DonutChartRoot & { displayName: string }\n).displayName = DONUT_CHART_DISPLAY_NAME;\n\n/**\n * The `DonutChart` is a variation of a pie chart with a circular shape and\n * a hole in the center. It divides the total amount into proportional slices,\n * each representing a category or value. The key difference is the presence of\n * the central hole, which allows placing additional information in the\n * available space.\n * @public\n */\nexport const DonutChart = Object.assign(DonutChartRoot, {\n  Legend: DonutChartLegend,\n  Grouping: DonutChartGrouping,\n  Labels: DonutChartLabels,\n  Inner: DonutChartInner,\n  Tooltip: DonutChartTooltipSlot,\n  Intent,\n  Toolbar,\n  EmptyState: EmptyStateSlot,\n  ErrorState: ErrorStateSlot,\n  ColorRule,\n  DownloadCSV: DonutChartDownloadCSVSlot,\n});\n"],
-  "mappings": "AA2GQ;AA3GR,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAClC;AAAA,EACE;AAAA,OAEK;AACP,SAAS,eAAe;AACxB,SAAS,iCAAiC;AAC1C,SAAS,YAAY,0BAA0B;AAC/C,SAAS,uBAAuB;AAChC,SAAS,UAAU,wBAAwB;AAC3C,SAAS,UAAU,wBAAwB;AAC3C,SAAS,WAAW,6BAA6B;AAMjD,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAC7B,SAAS,cAAc;AACvB,SAAS,wBAAwB;AACjC,SAAS,+BAA+B;AACxC,SAAS,sCAAsC;AAC/C,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAE1B,MAAM,iBAAiB;AAEvB,MAAM,yBAAyB,CAAC,WAA2C;AACzE,QAAM,UAAU,OAAO,UACnB,+BAA+B,OAAO,OAAO,IAC7C;AAEJ,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,EACF;AACF;AAEA,MAAM,iBAAiB,WAGrB,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,eAAe,aAAa;AAAA,EAC9B,IAAI;AAEJ,QAAM,cAAc,kBAAkB,KAAK;AAC3C,QAAM,EAAE,YAAY,WAAW,IAAI,wBAAwB,MAAM,QAAQ;AAEzE,QAAM,kBAAkB,CAAC,QAAQ,MAAM,IAAI;AAE3C,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,UAAU,aAA2C;AAAA,IACzD;AAAA,IACA;AAAA,EACF,CAAC;AAED;AAAA,IACE;AAAA,IACA,OAAsB;AAAA,MACpB,SAAS,aAAa;AAAA,MACtB,WAAW,MACT,KAAK,UAAU;AAAA,QACb,MAAM,UAAU;AAAA,QAChB,GAAG,uBAAuB,WAAW;AAAA,MACvC,CAAC;AAAA,MACH,cAAc,MAAM;AAClB,4BAAoB,MAAM,IAAI;AAAA,MAChC;AAAA,IACF;AAAA,EACF;AAEA,QAAM,iBAAsC;AAAA,IAC1C,WAAW,MAAM;AAAA,IACjB;AAAA,EACF;AAEA,SACE;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACC,OAAO;AAAA,QACL,cAAc,YAAY;AAAA,MAC5B;AAAA,MAEA,8BAAC,kBAAgB,GAAG,gBAClB;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,SAAS,cAAc;AAAA,UACvB,SAAS,CAAC;AAAA,UACV;AAAA,UACA;AAAA,UACA,WAAW,KAAK,kBAAkB,SAAS;AAAA,UAC3C;AAAA,UACA,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UAClB,eAAa;AAAA,UACb,qBAAmB;AAAA,UACnB,cAAY;AAAA,UACZ,MAAK;AAAA;AAAA,MACP,GACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAGC,eACA,cAAc;AAUT,MAAM,aAAa,OAAO,OAAO,gBAAgB;AAAA,EACtD,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ;AAAA,EACA,aAAa;AACf,CAAC;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  type PropsWithChildren,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { PieChartInternal } from './components/PieChartInternal.js';\nimport {\n  CHART_VARIANT,\n  DONUT_CHART_ARIA_LABEL,\n  DONUT_CHART_DISPLAY_NAME,\n} from './constants.js';\nimport { InnerElementContext } from './context/InnerElementContext.js';\nimport { useNormalizedPieData } from './hooks/useNormalizedPieData.js';\nimport { usePieChartConfig } from './hooks/usePieChartConfig.js';\nimport {\n  ChartProviders,\n  type ChartProvidersProps,\n} from './providers/ChartProviders.js';\nimport { Toolbar } from './shared/slots/Toolbar.js';\nimport { DonutChartDownloadCSVSlot } from './slots/DonutChartDownloadCSV.js';\nimport { Grouping as DonutChartGrouping } from './slots/DonutChartGrouping.js';\nimport { DonutChartInner } from './slots/DonutChartInner.js';\nimport { Labels as DonutChartLabels } from './slots/DonutChartLabels.js';\nimport { Legend as DonutChartLegend } from './slots/DonutChartLegend.js';\nimport { Tooltip as DonutChartTooltipSlot } from './slots/DonutChartTooltip.js';\nimport type { DonutChartRef, PieChartRef } from './types/pie-chart-ref.js';\nimport type { DonutChartProps } from './types/pie-chart.config.js';\nimport { buildAndDownloadCsv } from './utils/build-and-download-csv.js';\nimport { sanitizeToolbarIntents } from './utils/sanitize-toolbar-intents.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { Intent } from '../../core/slots/Intent/Intent.js';\nimport { defaultChartSize } from '../../core/styles/defaultChartValues.sty.js';\nimport { getChartStatesTemplates } from '../core/components/chart-states/utils/get-chart-states-template.js';\nimport { EmptyStateSlot } from '../core/slots/chart-states/EmptyStateSlot.js';\nimport { ErrorStateSlot } from '../core/slots/chart-states/ErrorStateSlot.js';\nimport { ColorRule } from '../core/slots/ColorRule.js';\nimport { ChartType } from '../core/types/chart-types.js';\n\nconst COMPONENT_NAME = 'DonutChart';\n\nconst DonutChartRoot = forwardRef<\n  DonutChartRef,\n  PropsWithChildren<DonutChartProps>\n>((props, forwardedRef) => {\n  const {\n    className,\n    style,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId = 'donut-chart-root',\n  } = props;\n\n  const chartConfig = usePieChartConfig(props);\n  const { emptyState, errorState } = getChartStatesTemplates(props.children);\n\n  const { normalizedData, isDataAvailable } = useNormalizedPieData(props);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const rootRef = useMergeRefs<PieChartRef | HTMLDivElement>([\n    forwardedRef,\n    containerRef,\n  ]);\n\n  useImperativeHandle(\n    forwardedRef,\n    (): DonutChartRef => ({\n      element: containerRef.current,\n      getConfig: () =>\n        JSON.stringify({\n          type: ChartType.Donut,\n          ...sanitizeToolbarIntents(chartConfig),\n        }),\n      downloadData: () => {\n        buildAndDownloadCsv(normalizedData);\n      },\n    }),\n  );\n\n  const providersProps: ChartProvidersProps = {\n    chartData: normalizedData,\n    chartConfig,\n  };\n\n  return (\n    <InnerElementContext.Provider\n      value={{\n        innerElement: chartConfig.innerElement,\n      }}\n    >\n      <ChartProviders {...providersProps}>\n        <PieChartInternal\n          {...props}\n          ref={rootRef}\n          variant={CHART_VARIANT.Donut}\n          isEmpty={!isDataAvailable}\n          emptyState={emptyState}\n          errorState={errorState}\n          className={clsx(defaultChartSize, className)}\n          style={style}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n          data-testid={dataTestId}\n          data-dt-component={COMPONENT_NAME}\n          aria-label={DONUT_CHART_ARIA_LABEL}\n          role=\"img\"\n        />\n      </ChartProviders>\n    </InnerElementContext.Provider>\n  );\n});\n\n(\n  DonutChartRoot as typeof DonutChartRoot & { displayName: string }\n).displayName = DONUT_CHART_DISPLAY_NAME;\n\n/**\n * The `DonutChart` is a variation of a pie chart with a circular shape and\n * a hole in the center. It divides the total amount into proportional slices,\n * each representing a category or value. The key difference is the presence of\n * the central hole, which allows placing additional information in the\n * available space.\n * @public\n */\nexport const DonutChart = Object.assign(DonutChartRoot, {\n  Legend: DonutChartLegend,\n  Grouping: DonutChartGrouping,\n  Labels: DonutChartLabels,\n  Inner: DonutChartInner,\n  Tooltip: DonutChartTooltipSlot,\n  Intent,\n  Toolbar,\n  EmptyState: EmptyStateSlot,\n  ErrorState: ErrorStateSlot,\n  ColorRule,\n  DownloadCSV: DonutChartDownloadCSVSlot,\n});\n"],
+  "mappings": "AA6FQ;AA7FR,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AACrC,SAAS,yBAAyB;AAClC;AAAA,EACE;AAAA,OAEK;AACP,SAAS,eAAe;AACxB,SAAS,iCAAiC;AAC1C,SAAS,YAAY,0BAA0B;AAC/C,SAAS,uBAAuB;AAChC,SAAS,UAAU,wBAAwB;AAC3C,SAAS,UAAU,wBAAwB;AAC3C,SAAS,WAAW,6BAA6B;AAGjD,SAAS,2BAA2B;AACpC,SAAS,8BAA8B;AACvC,SAAS,oBAAoB;AAC7B,SAAS,cAAc;AACvB,SAAS,wBAAwB;AACjC,SAAS,+BAA+B;AACxC,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAE1B,MAAM,iBAAiB;AAEvB,MAAM,iBAAiB,WAGrB,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,eAAe,aAAa;AAAA,EAC9B,IAAI;AAEJ,QAAM,cAAc,kBAAkB,KAAK;AAC3C,QAAM,EAAE,YAAY,WAAW,IAAI,wBAAwB,MAAM,QAAQ;AAEzE,QAAM,EAAE,gBAAgB,gBAAgB,IAAI,qBAAqB,KAAK;AAEtE,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,UAAU,aAA2C;AAAA,IACzD;AAAA,IACA;AAAA,EACF,CAAC;AAED;AAAA,IACE;AAAA,IACA,OAAsB;AAAA,MACpB,SAAS,aAAa;AAAA,MACtB,WAAW,MACT,KAAK,UAAU;AAAA,QACb,MAAM,UAAU;AAAA,QAChB,GAAG,uBAAuB,WAAW;AAAA,MACvC,CAAC;AAAA,MACH,cAAc,MAAM;AAClB,4BAAoB,cAAc;AAAA,MACpC;AAAA,IACF;AAAA,EACF;AAEA,QAAM,iBAAsC;AAAA,IAC1C,WAAW;AAAA,IACX;AAAA,EACF;AAEA,SACE;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACC,OAAO;AAAA,QACL,cAAc,YAAY;AAAA,MAC5B;AAAA,MAEA,8BAAC,kBAAgB,GAAG,gBAClB;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,SAAS,cAAc;AAAA,UACvB,SAAS,CAAC;AAAA,UACV;AAAA,UACA;AAAA,UACA,WAAW,KAAK,kBAAkB,SAAS;AAAA,UAC3C;AAAA,UACA,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UAClB,eAAa;AAAA,UACb,qBAAmB;AAAA,UACnB,cAAY;AAAA,UACZ,MAAK;AAAA;AAAA,MACP,GACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAGC,eACA,cAAc;AAUT,MAAM,aAAa,OAAO,OAAO,gBAAgB;AAAA,EACtD,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ;AAAA,EACA,aAAa;AACf,CAAC;",
   "names": []
 }

package/esm/charts/pie/PieChart.js

@@ -1,6 +1,5 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
-import { isEmpty } from "lodash-es";
 import {
   forwardRef,
   useImperativeHandle,
@@ -12,34 +11,28 @@ import {
   PIE_CHART_ARIA_LABEL,
   PIE_CHART_DISPLAY_NAME
 } from "./constants.js";
+import { useNormalizedPieData } from "./hooks/useNormalizedPieData.js";
 import { usePieChartConfig } from "./hooks/usePieChartConfig.js";
 import {
   ChartProviders
 } from "./providers/ChartProviders.js";
+import { Toolbar } from "./shared/slots/Toolbar.js";
+import { PieChartDownloadCSVSlot } from "./slots/PieChartDownloadCSV.js";
 import { Grouping as PieChartGrouping } from "./slots/PieChartGrouping.js";
 import { Labels as PieChartLabels } from "./slots/PieChartLabels.js";
 import { Legend as PieChartLegend } from "./slots/PieChartLegend.js";
 import { Tooltip as PieChartTooltipSlot } from "./slots/PieChartTooltip.js";
 import { buildAndDownloadCsv } from "./utils/build-and-download-csv.js";
+import { sanitizeToolbarIntents } from "./utils/sanitize-toolbar-intents.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
 import { Intent } from "../../core/slots/Intent/Intent.js";
 import { defaultChartSize } from "../../core/styles/defaultChartValues.sty.js";
 import { getChartStatesTemplates } from "../core/components/chart-states/utils/get-chart-states-template.js";
-import { getToolbarConfigWithoutIntents } from "../core/components/toolbar/utils/get-toolbar-config-without-intents.js";
 import { EmptyStateSlot } from "../core/slots/chart-states/EmptyStateSlot.js";
 import { ErrorStateSlot } from "../core/slots/chart-states/ErrorStateSlot.js";
 import { ColorRule } from "../core/slots/ColorRule.js";
 import { ChartType } from "../core/types/chart-types.js";
-import { Toolbar } from "./shared/slots/Toolbar.js";
-import { PieChartDownloadCSVSlot } from "./slots/PieChartDownloadCSV.js";
 const COMPONENT_NAME = "PieChart";
-const sanitizeToolbarIntents = (config) => {
-  const toolbar = config.toolbar ? getToolbarConfigWithoutIntents(config.toolbar) : void 0;
-  return {
-    ...config,
-    toolbar
-  };
-};
 const PieChartRoot = forwardRef(
   (props, forwardedRef) => {
     const {
@@ -51,7 +44,7 @@ const PieChartRoot = forwardRef(
     } = props;
     const chartConfig = usePieChartConfig(props);
     const { emptyState, errorState } = getChartStatesTemplates(props.children);
-    const isDataAvailable = !isEmpty(props.data);
+    const { normalizedData, isDataAvailable } = useNormalizedPieData(props);
     const containerRef = useRef(null);
     const rootRef = useMergeRefs([
       forwardedRef,
@@ -66,12 +59,12 @@ const PieChartRoot = forwardRef(
           ...sanitizeToolbarIntents(chartConfig)
         }),
         downloadData: () => {
-          buildAndDownloadCsv(props.data);
+          buildAndDownloadCsv(normalizedData);
         }
       })
     );
     const providersProps = {
-      chartData: props.data,
+      chartData: normalizedData,
       chartConfig
     };
     return /* @__PURE__ */ jsx(ChartProviders, { ...providersProps, children: /* @__PURE__ */ jsx(

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/pie/PieChart.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { isEmpty } from 'lodash-es';\nimport {\n  forwardRef,\n  type PropsWithChildren,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { PieChartInternal } from './components/PieChartInternal.js';\nimport {\n  CHART_VARIANT,\n  PIE_CHART_ARIA_LABEL,\n  PIE_CHART_DISPLAY_NAME,\n} from './constants.js';\nimport { usePieChartConfig } from './hooks/usePieChartConfig.js';\nimport {\n  ChartProviders,\n  type ChartProvidersProps,\n} from './providers/ChartProviders.js';\nimport { Grouping as PieChartGrouping } from './slots/PieChartGrouping.js';\nimport { Labels as PieChartLabels } from './slots/PieChartLabels.js';\nimport { Legend as PieChartLegend } from './slots/PieChartLegend.js';\nimport { Tooltip as PieChartTooltipSlot } from './slots/PieChartTooltip.js';\nimport type { PieChartRef } from './types/pie-chart-ref.js';\nimport type {\n  PieChartProps,\n  PieDonutConfig,\n} from './types/pie-chart.config.js';\nimport { buildAndDownloadCsv } from './utils/build-and-download-csv.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { Intent } from '../../core/slots/Intent/Intent.js';\nimport { defaultChartSize } from '../../core/styles/defaultChartValues.sty.js';\nimport { getChartStatesTemplates } from '../core/components/chart-states/utils/get-chart-states-template.js';\nimport { getToolbarConfigWithoutIntents } from '../core/components/toolbar/utils/get-toolbar-config-without-intents.js';\nimport { EmptyStateSlot } from '../core/slots/chart-states/EmptyStateSlot.js';\nimport { ErrorStateSlot } from '../core/slots/chart-states/ErrorStateSlot.js';\nimport { ColorRule } from '../core/slots/ColorRule.js';\nimport { ChartType } from '../core/types/chart-types.js';\nimport { Toolbar } from './shared/slots/Toolbar.js';\nimport { PieChartDownloadCSVSlot } from './slots/PieChartDownloadCSV.js';\n\nconst COMPONENT_NAME = 'PieChart';\nconst sanitizeToolbarIntents = (config: PieDonutConfig): PieDonutConfig => {\n  const toolbar = config.toolbar\n    ? getToolbarConfigWithoutIntents(config.toolbar)\n    : undefined;\n\n  return {\n    ...config,\n    toolbar,\n  };\n};\n\nconst PieChartRoot = forwardRef<PieChartRef, PropsWithChildren<PieChartProps>>(\n  (props, forwardedRef) => {\n    const {\n      className,\n      style,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      'data-testid': dataTestId = 'pie-chart-root',\n    } = props;\n\n    const chartConfig = usePieChartConfig(props);\n\n    const { emptyState, errorState } = getChartStatesTemplates(props.children);\n\n    const isDataAvailable = !isEmpty(props.data);\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const rootRef = useMergeRefs<PieChartRef | HTMLDivElement>([\n      forwardedRef,\n      containerRef,\n    ]);\n\n    useImperativeHandle(\n      forwardedRef,\n      (): PieChartRef => ({\n        element: containerRef.current,\n        getConfig: () =>\n          JSON.stringify({\n            type: ChartType.Pie,\n            ...sanitizeToolbarIntents(chartConfig),\n          }),\n        downloadData: () => {\n          buildAndDownloadCsv(props.data);\n        },\n      }),\n    );\n\n    const providersProps: ChartProvidersProps = {\n      chartData: props.data,\n      chartConfig,\n    };\n\n    return (\n      <ChartProviders {...providersProps}>\n        <PieChartInternal\n          {...props}\n          ref={rootRef}\n          height={chartConfig.height}\n          variant={CHART_VARIANT.Pie}\n          isEmpty={!isDataAvailable}\n          emptyState={emptyState}\n          errorState={errorState}\n          className={clsx(defaultChartSize, className)}\n          style={style}\n          data-dt-component={COMPONENT_NAME}\n          data-testid={dataTestId}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n          aria-label={PIE_CHART_ARIA_LABEL}\n          role=\"img\"\n        />\n      </ChartProviders>\n    );\n  },\n);\n\n(PieChartRoot as typeof PieChartRoot & { displayName: string }).displayName =\n  PIE_CHART_DISPLAY_NAME;\n\n/**\n * The `PieChart` visualizes data proportions in a circular chart.\n * It divides a circle into slices, with each slice representing a specific\n * category or value.\n * @public\n */\nexport const PieChart = Object.assign(PieChartRoot, {\n  Legend: PieChartLegend,\n  Grouping: PieChartGrouping,\n  Labels: PieChartLabels,\n  Tooltip: PieChartTooltipSlot,\n  Intent,\n  EmptyState: EmptyStateSlot,\n  ErrorState: ErrorStateSlot,\n  ColorRule,\n  Toolbar,\n  DownloadCSV: PieChartDownloadCSVSlot,\n});\n"],
-  "mappings": "AAkGQ;AAlGR,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,yBAAyB;AAClC;AAAA,EACE;AAAA,OAEK;AACP,SAAS,YAAY,wBAAwB;AAC7C,SAAS,UAAU,sBAAsB;AACzC,SAAS,UAAU,sBAAsB;AACzC,SAAS,WAAW,2BAA2B;AAM/C,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAC7B,SAAS,cAAc;AACvB,SAAS,wBAAwB;AACjC,SAAS,+BAA+B;AACxC,SAAS,sCAAsC;AAC/C,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AACxB,SAAS,+BAA+B;AAExC,MAAM,iBAAiB;AACvB,MAAM,yBAAyB,CAAC,WAA2C;AACzE,QAAM,UAAU,OAAO,UACnB,+BAA+B,OAAO,OAAO,IAC7C;AAEJ,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,EACF;AACF;AAEA,MAAM,eAAe;AAAA,EACnB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,eAAe,aAAa;AAAA,IAC9B,IAAI;AAEJ,UAAM,cAAc,kBAAkB,KAAK;AAE3C,UAAM,EAAE,YAAY,WAAW,IAAI,wBAAwB,MAAM,QAAQ;AAEzE,UAAM,kBAAkB,CAAC,QAAQ,MAAM,IAAI;AAE3C,UAAM,eAAe,OAAuB,IAAI;AAChD,UAAM,UAAU,aAA2C;AAAA,MACzD;AAAA,MACA;AAAA,IACF,CAAC;AAED;AAAA,MACE;AAAA,MACA,OAAoB;AAAA,QAClB,SAAS,aAAa;AAAA,QACtB,WAAW,MACT,KAAK,UAAU;AAAA,UACb,MAAM,UAAU;AAAA,UAChB,GAAG,uBAAuB,WAAW;AAAA,QACvC,CAAC;AAAA,QACH,cAAc,MAAM;AAClB,8BAAoB,MAAM,IAAI;AAAA,QAChC;AAAA,MACF;AAAA,IACF;AAEA,UAAM,iBAAsC;AAAA,MAC1C,WAAW,MAAM;AAAA,MACjB;AAAA,IACF;AAEA,WACE,oBAAC,kBAAgB,GAAG,gBAClB;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,QAAQ,YAAY;AAAA,QACpB,SAAS,cAAc;AAAA,QACvB,SAAS,CAAC;AAAA,QACV;AAAA,QACA;AAAA,QACA,WAAW,KAAK,kBAAkB,SAAS;AAAA,QAC3C;AAAA,QACA,qBAAmB;AAAA,QACnB,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,cAAY;AAAA,QACZ,MAAK;AAAA;AAAA,IACP,GACF;AAAA,EAEJ;AACF;AAEC,aAA+D,cAC9D;AAQK,MAAM,WAAW,OAAO,OAAO,cAAc;AAAA,EAClD,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,SAAS;AAAA,EACT;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,aAAa;AACf,CAAC;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  type PropsWithChildren,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { PieChartInternal } from './components/PieChartInternal.js';\nimport {\n  CHART_VARIANT,\n  PIE_CHART_ARIA_LABEL,\n  PIE_CHART_DISPLAY_NAME,\n} from './constants.js';\nimport { useNormalizedPieData } from './hooks/useNormalizedPieData.js';\nimport { usePieChartConfig } from './hooks/usePieChartConfig.js';\nimport {\n  ChartProviders,\n  type ChartProvidersProps,\n} from './providers/ChartProviders.js';\nimport { Toolbar } from './shared/slots/Toolbar.js';\nimport { PieChartDownloadCSVSlot } from './slots/PieChartDownloadCSV.js';\nimport { Grouping as PieChartGrouping } from './slots/PieChartGrouping.js';\nimport { Labels as PieChartLabels } from './slots/PieChartLabels.js';\nimport { Legend as PieChartLegend } from './slots/PieChartLegend.js';\nimport { Tooltip as PieChartTooltipSlot } from './slots/PieChartTooltip.js';\nimport type { PieChartRef } from './types/pie-chart-ref.js';\nimport type { PieChartProps } from './types/pie-chart.config.js';\nimport { buildAndDownloadCsv } from './utils/build-and-download-csv.js';\nimport { sanitizeToolbarIntents } from './utils/sanitize-toolbar-intents.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { Intent } from '../../core/slots/Intent/Intent.js';\nimport { defaultChartSize } from '../../core/styles/defaultChartValues.sty.js';\nimport { getChartStatesTemplates } from '../core/components/chart-states/utils/get-chart-states-template.js';\nimport { EmptyStateSlot } from '../core/slots/chart-states/EmptyStateSlot.js';\nimport { ErrorStateSlot } from '../core/slots/chart-states/ErrorStateSlot.js';\nimport { ColorRule } from '../core/slots/ColorRule.js';\nimport { ChartType } from '../core/types/chart-types.js';\n\nconst COMPONENT_NAME = 'PieChart';\n\nconst PieChartRoot = forwardRef<PieChartRef, PropsWithChildren<PieChartProps>>(\n  (props, forwardedRef) => {\n    const {\n      className,\n      style,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      'data-testid': dataTestId = 'pie-chart-root',\n    } = props;\n\n    const chartConfig = usePieChartConfig(props);\n\n    const { emptyState, errorState } = getChartStatesTemplates(props.children);\n\n    const { normalizedData, isDataAvailable } = useNormalizedPieData(props);\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const rootRef = useMergeRefs<PieChartRef | HTMLDivElement>([\n      forwardedRef,\n      containerRef,\n    ]);\n\n    useImperativeHandle(\n      forwardedRef,\n      (): PieChartRef => ({\n        element: containerRef.current,\n        getConfig: () =>\n          JSON.stringify({\n            type: ChartType.Pie,\n            ...sanitizeToolbarIntents(chartConfig),\n          }),\n        downloadData: () => {\n          buildAndDownloadCsv(normalizedData);\n        },\n      }),\n    );\n\n    const providersProps: ChartProvidersProps = {\n      chartData: normalizedData,\n      chartConfig,\n    };\n\n    return (\n      <ChartProviders {...providersProps}>\n        <PieChartInternal\n          {...props}\n          ref={rootRef}\n          height={chartConfig.height}\n          variant={CHART_VARIANT.Pie}\n          isEmpty={!isDataAvailable}\n          emptyState={emptyState}\n          errorState={errorState}\n          className={clsx(defaultChartSize, className)}\n          style={style}\n          data-dt-component={COMPONENT_NAME}\n          data-testid={dataTestId}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n          aria-label={PIE_CHART_ARIA_LABEL}\n          role=\"img\"\n        />\n      </ChartProviders>\n    );\n  },\n);\n\n(PieChartRoot as typeof PieChartRoot & { displayName: string }).displayName =\n  PIE_CHART_DISPLAY_NAME;\n\n/**\n * The `PieChart` visualizes data proportions in a circular chart.\n * It divides a circle into slices, with each slice representing a specific\n * category or value.\n * @public\n */\nexport const PieChart = Object.assign(PieChartRoot, {\n  Legend: PieChartLegend,\n  Grouping: PieChartGrouping,\n  Labels: PieChartLabels,\n  Tooltip: PieChartTooltipSlot,\n  Intent,\n  EmptyState: EmptyStateSlot,\n  ErrorState: ErrorStateSlot,\n  ColorRule,\n  Toolbar,\n  DownloadCSV: PieChartDownloadCSVSlot,\n});\n"],
+  "mappings": "AAqFQ;AArFR,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AACrC,SAAS,yBAAyB;AAClC;AAAA,EACE;AAAA,OAEK;AACP,SAAS,eAAe;AACxB,SAAS,+BAA+B;AACxC,SAAS,YAAY,wBAAwB;AAC7C,SAAS,UAAU,sBAAsB;AACzC,SAAS,UAAU,sBAAsB;AACzC,SAAS,WAAW,2BAA2B;AAG/C,SAAS,2BAA2B;AACpC,SAAS,8BAA8B;AACvC,SAAS,oBAAoB;AAC7B,SAAS,cAAc;AACvB,SAAS,wBAAwB;AACjC,SAAS,+BAA+B;AACxC,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAE1B,MAAM,iBAAiB;AAEvB,MAAM,eAAe;AAAA,EACnB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,eAAe,aAAa;AAAA,IAC9B,IAAI;AAEJ,UAAM,cAAc,kBAAkB,KAAK;AAE3C,UAAM,EAAE,YAAY,WAAW,IAAI,wBAAwB,MAAM,QAAQ;AAEzE,UAAM,EAAE,gBAAgB,gBAAgB,IAAI,qBAAqB,KAAK;AAEtE,UAAM,eAAe,OAAuB,IAAI;AAChD,UAAM,UAAU,aAA2C;AAAA,MACzD;AAAA,MACA;AAAA,IACF,CAAC;AAED;AAAA,MACE;AAAA,MACA,OAAoB;AAAA,QAClB,SAAS,aAAa;AAAA,QACtB,WAAW,MACT,KAAK,UAAU;AAAA,UACb,MAAM,UAAU;AAAA,UAChB,GAAG,uBAAuB,WAAW;AAAA,QACvC,CAAC;AAAA,QACH,cAAc,MAAM;AAClB,8BAAoB,cAAc;AAAA,QACpC;AAAA,MACF;AAAA,IACF;AAEA,UAAM,iBAAsC;AAAA,MAC1C,WAAW;AAAA,MACX;AAAA,IACF;AAEA,WACE,oBAAC,kBAAgB,GAAG,gBAClB;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,QAAQ,YAAY;AAAA,QACpB,SAAS,cAAc;AAAA,QACvB,SAAS,CAAC;AAAA,QACV;AAAA,QACA;AAAA,QACA,WAAW,KAAK,kBAAkB,SAAS;AAAA,QAC3C;AAAA,QACA,qBAAmB;AAAA,QACnB,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,cAAY;AAAA,QACZ,MAAK;AAAA;AAAA,IACP,GACF;AAAA,EAEJ;AACF;AAEC,aAA+D,cAC9D;AAQK,MAAM,WAAW,OAAO,OAAO,cAAc;AAAA,EAClD,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,SAAS;AAAA,EACT;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,aAAa;AACf,CAAC;",
   "names": []
 }

package/esm/charts/pie/components/InnerWrapper/components/InnerContainer/InnerContainer.css

@@ -1,3 +1,3 @@
-._1cob19w0-3-7-1 {
+._1cob19w0-3-8-0 {
   position: absolute;
 }

package/esm/charts/pie/components/InnerWrapper/components/InnerContainer/InnerContainer.sty.js

@@ -1,5 +1,5 @@
 import "./InnerContainer.css";
-var container = "_1cob19w0-3-7-1";
+var container = "_1cob19w0-3-8-0";
 export {
   container
 };

package/esm/charts/pie/components/InnerWrapper/components/InnerContainer/InnerContainer.sty.js.map

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

package/esm/charts/pie/components/InnerWrapper/components/InnerDonut/InnerDonut.css

@@ -1,3 +1,3 @@
-._1gn0gqx0-3-7-1 {
+._1gn0gqx0-3-8-0 {
   overflow: hidden;
 }

package/esm/charts/pie/components/InnerWrapper/components/InnerDonut/InnerDonut.sty.js

@@ -1,5 +1,5 @@
 import "./InnerDonut.css";
-var container = "_1gn0gqx0-3-7-1";
+var container = "_1gn0gqx0-3-8-0";
 export {
   container
 };

package/esm/charts/pie/components/InnerWrapper/components/InnerDonut/InnerDonut.sty.js.map

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

package/esm/charts/pie/components/PieChartOverlays/PieChartOverlays.css

@@ -1,4 +1,4 @@
-._jxp4cr0-3-7-1 {
+._jxp4cr0-3-8-0 {
   position: relative;
   height: 100%;
   z-index: 1;

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

@@ -11,7 +11,7 @@ import { PieChartTooltip } from "../PieChartTooltip/PieChartTooltip.js";
 const PieChartOverlays = ({ children }) => {
   const overlay = useOverlay();
   const loading = useChartLayoutLoading();
-  const { onMouseEnterHandler, onMouseLeaveHandler } = useOverlayHandlers();
+  const { onPointerEnterHandler, onPointerLeaveHandler } = useOverlayHandlers();
   const toolbarConfig = useToolbarConfig();
   const toolbarEnabled = isToolbarEnabled(toolbarConfig);
   return /* @__PURE__ */ jsxs(
@@ -22,8 +22,8 @@ const PieChartOverlays = ({ children }) => {
       justifyContent: "center",
       alignItems: "center",
       className: container,
-      onMouseEnter: loading ? void 0 : onMouseEnterHandler,
-      onMouseLeave: loading ? void 0 : onMouseLeaveHandler,
+      onPointerEnter: loading ? void 0 : onPointerEnterHandler,
+      onPointerLeave: loading ? void 0 : onPointerLeaveHandler,
       children: [
         !loading && /* @__PURE__ */ jsx(PieChartTooltip, {}),
         !loading && toolbarEnabled && /* @__PURE__ */ jsx(PieChartToolbar, {}),

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/pie/components/PieChartOverlays/PieChartOverlays.tsx"],
-  "sourcesContent": ["import type { PropsWithChildren } from 'react';\n\nimport { container } from './PieChartOverlays.sty.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { useChartLayoutLoading } from '../../../core/components/chart-layout/hooks/useChartLayoutLoading.js';\nimport { useOverlay } from '../../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { isToolbarEnabled } from '../../../core/utils/is-toolbar-enabled.js';\nimport { useToolbarConfig } from '../../context/ToolbarContext.js';\nimport { useOverlayHandlers } from '../../hooks/useOverlayHandlers.js';\nimport { PieChartToolbar } from '../PieChartToolbar/PieChartToolbar.js';\nimport { PieChartTooltip } from '../PieChartTooltip/PieChartTooltip.js';\n\nexport const PieChartOverlays = ({ children }: PropsWithChildren) => {\n  const overlay = useOverlay();\n  const loading = useChartLayoutLoading();\n  const { onMouseEnterHandler, onMouseLeaveHandler } = useOverlayHandlers();\n\n  const toolbarConfig = useToolbarConfig();\n\n  const toolbarEnabled = isToolbarEnabled(toolbarConfig);\n\n  return (\n    <Flex\n      ref={overlay.overlayRef}\n      data-testid=\"overlays-wrapper\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      className={container}\n      onMouseEnter={loading ? undefined : onMouseEnterHandler}\n      onMouseLeave={loading ? undefined : onMouseLeaveHandler}\n    >\n      {!loading && <PieChartTooltip />}\n      {!loading && toolbarEnabled && <PieChartToolbar />}\n      {children}\n    </Flex>\n  );\n};\n"],
-  "mappings": "AAsBI,SASe,KATf;AApBJ,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AACrB,SAAS,6BAA6B;AACtC,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAEzB,MAAM,mBAAmB,CAAC,EAAE,SAAS,MAAyB;AACnE,QAAM,UAAU,WAAW;AAC3B,QAAM,UAAU,sBAAsB;AACtC,QAAM,EAAE,qBAAqB,oBAAoB,IAAI,mBAAmB;AAExE,QAAM,gBAAgB,iBAAiB;AAEvC,QAAM,iBAAiB,iBAAiB,aAAa;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,QAAQ;AAAA,MACb,eAAY;AAAA,MACZ,gBAAe;AAAA,MACf,YAAW;AAAA,MACX,WAAW;AAAA,MACX,cAAc,UAAU,SAAY;AAAA,MACpC,cAAc,UAAU,SAAY;AAAA,MAEnC;AAAA,SAAC,WAAW,oBAAC,mBAAgB;AAAA,QAC7B,CAAC,WAAW,kBAAkB,oBAAC,mBAAgB;AAAA,QAC/C;AAAA;AAAA;AAAA,EACH;AAEJ;",
+  "sourcesContent": ["import type { PropsWithChildren } from 'react';\n\nimport { container } from './PieChartOverlays.sty.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { useChartLayoutLoading } from '../../../core/components/chart-layout/hooks/useChartLayoutLoading.js';\nimport { useOverlay } from '../../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { isToolbarEnabled } from '../../../core/utils/is-toolbar-enabled.js';\nimport { useToolbarConfig } from '../../context/ToolbarContext.js';\nimport { useOverlayHandlers } from '../../hooks/useOverlayHandlers.js';\nimport { PieChartToolbar } from '../PieChartToolbar/PieChartToolbar.js';\nimport { PieChartTooltip } from '../PieChartTooltip/PieChartTooltip.js';\n\nexport const PieChartOverlays = ({ children }: PropsWithChildren) => {\n  const overlay = useOverlay();\n  const loading = useChartLayoutLoading();\n  const { onPointerEnterHandler, onPointerLeaveHandler } = useOverlayHandlers();\n\n  const toolbarConfig = useToolbarConfig();\n\n  const toolbarEnabled = isToolbarEnabled(toolbarConfig);\n\n  return (\n    <Flex\n      ref={overlay.overlayRef}\n      data-testid=\"overlays-wrapper\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      className={container}\n      onPointerEnter={loading ? undefined : onPointerEnterHandler}\n      onPointerLeave={loading ? undefined : onPointerLeaveHandler}\n    >\n      {!loading && <PieChartTooltip />}\n      {!loading && toolbarEnabled && <PieChartToolbar />}\n      {children}\n    </Flex>\n  );\n};\n"],
+  "mappings": "AAsBI,SASe,KATf;AApBJ,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AACrB,SAAS,6BAA6B;AACtC,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAEzB,MAAM,mBAAmB,CAAC,EAAE,SAAS,MAAyB;AACnE,QAAM,UAAU,WAAW;AAC3B,QAAM,UAAU,sBAAsB;AACtC,QAAM,EAAE,uBAAuB,sBAAsB,IAAI,mBAAmB;AAE5E,QAAM,gBAAgB,iBAAiB;AAEvC,QAAM,iBAAiB,iBAAiB,aAAa;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,QAAQ;AAAA,MACb,eAAY;AAAA,MACZ,gBAAe;AAAA,MACf,YAAW;AAAA,MACX,WAAW;AAAA,MACX,gBAAgB,UAAU,SAAY;AAAA,MACtC,gBAAgB,UAAU,SAAY;AAAA,MAErC;AAAA,SAAC,WAAW,oBAAC,mBAAgB;AAAA,QAC7B,CAAC,WAAW,kBAAkB,oBAAC,mBAAgB;AAAA,QAC/C;AAAA;AAAA;AAAA,EACH;AAEJ;",
   "names": []
 }

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

@@ -1,5 +1,5 @@
 import "./PieChartOverlays.css";
-var container = "_jxp4cr0-3-7-1";
+var container = "_jxp4cr0-3-8-0";
 export {
   container
 };

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

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

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

@@ -1,3 +1,3 @@
-._1iotdmn0-3-7-1 {
+._1iotdmn0-3-8-0 {
   position: relative;
 }

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": "AA+HU,cA8BM,YA9BN;AA/HV,SAAS,KAA8C,WAAW;AAClE,SAAS,YAAY,UAAU,eAAe;AAE9C,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAClC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAOP,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAC3B,SAAS,WAAW,kBAAkB;AACtC,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAM9B,MAAM,WAAW,CAAC,YAA+B,QAAQ;AAEzD,MAAM,YAAY,IAAuB,EACtC,MAAM,QAAQ,EACd,SAAS,SAAS,EAClB,KAAK,IAAI;AAEL,MAAM,eAAe;AAAA,EAC1B,CAAC,OAAO,iBAAiB;AACvB,UAAM,EAAE,QAAQ,IAAI;AACpB,UAAM,kBAAkB,kBAAkB;AAC1C,UAAM,gBAAgB,sBAAsB;AAC5C,UAAM,gBAAgB,sBAAsB;AAC5C,UAAM,EAAE,QAAQ,MAAM,IAAI,aAAa;AACvC,UAAM,EAAE,QAAQ,cAAc,UAAU,IAAI,UAAU;AACtD,UAAM,YAAY,aAAa;AAC/B,UAAM,iBAAiB,kBAAkB;AACzC,UAAM,EAAE,WAAW,QAAQ,YAAY,YAAY,IAAI;AAAA,MACrD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,CAAC,CAAC;AAAA,IACJ;AAEA,UAAM,aAAa,cAAc,IAAI,CAAC,UAAU,MAAM,EAAE;AAExD,UAAM,OAAO,QAAQ,MAAM,UAAU,aAAa,GAAG,CAAC,aAAa,CAAC;AAEpE,UAAM,gBAAgB;AAAA,MACpB,MACE,IAAoC,EACjC,YAAY,WAAW,EACvB,YAAY,MAAM;AAAA,MACvB,CAAC,aAAa,MAAM;AAAA,IACtB;AAEA,UAAM,eAAe;AAAA,MACnB,MACE,IAAI,EACD,YAAY,WAAW,EACvB,YAAY,MAAM,EAClB,WAAW,CAAC,EACZ,SAAS,GAAG,EAAE,CAAC,CAAqB;AAAA,MACzC,CAAC,aAAa,MAAM;AAAA,IACtB;AAEA,UAAM,kBAAkB,QAAQ,MAAM;AACpC,UAAI,gBAA2C;AAE/C,aAAO,KAAK,IAAI,CAAC,WAAW;AAC1B,cAAM,QAAQ;AAAA,UACZ;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAEA,cAAM,gBACJ,CAAC,iBAAiB,kBAAkB,OAAO,KAAK;AAElD,cAAM,YACJ,CAAC,gBACD,WAAW,OAAO,YAAY,SAAS,MACtC,CAAC,iBAAiB,CAAC,UAAU,OAAO,aAAa,MAClD,OAAO,KAAK,OAAO;AAErB,YAAI,WAAW;AACb,0BAAgB;AAAA,QAClB;AAEA,eAAO,EAAE,QAAQ,OAAO,eAAe,UAAU;AAAA,MACnD,CAAC;AAAA,IACH,GAAG;AAAA,MACD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,WACE,qBAAC,SAAI,WAAW,WAAW,KAAK,cAC7B;AAAA,kBAAY,cAAc,SACzB;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MAGF,oBAAC,SAAI,OAAc,QAAgB,OAAO,EAAE,UAAU,UAAU,GAC9D;AAAA,QAAC;AAAA;AAAA,UACC,WACE,cAAc,KAAK,eAAe,IAC9B,aAAa,UAAU,KAAK,SAAS,MACrC;AAAA,UAEN,cAAc,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAAA,UAEvD;AAAA,wBAAY,cAAc,MACzB;AAAA,cAAC;AAAA;AAAA,gBACC,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,GAAG,SAAS,IAAI,SAAS;AAAA,gBACzB,MAAK;AAAA;AAAA,YACP,IAEA,oBAAC,UAAK,GAAG,cAAc,MAAK,eAAc;AAAA,YAG3C,gBAAgB;AAAA,cACf,CAAC,EAAE,QAAQ,OAAO,eAAe,UAAU,MACzC,qBAAC,YACC;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,SAAS,SAAS,OAAO,KAAK,EAAE;AAAA,oBAChC,KAAK;AAAA,oBACL,MAAM,OAAO;AAAA,oBACb,MAAM;AAAA,oBACN;AAAA;AAAA,gBACF;AAAA,gBACC,aACC;AAAA,kBAAC;AAAA;AAAA,oBACC,GAAG,MAAM;AAAA,oBACT,GAAG,MAAM;AAAA,oBACT,MAAM,MAAM;AAAA,oBACZ;AAAA;AAAA,gBACF;AAAA,mBAdW,SAAS,OAAO,KAAK,EAAE,EAgBtC;AAAA,YAEJ;AAAA;AAAA;AAAA,MACF,GACF;AAAA,OACF;AAAA,EAEJ;AACF;",
+  "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-8-0";
 export {
   container
 };