@cloudscape-design/components-themeable 3.0.227 → 3.0.228

package/lib/internal/template/pie-chart/index.js

@@ -1,4 +1,4 @@
-import { __assign, __rest } from "tslib";
+import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -18,72 +18,71 @@ import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import createCategoryColorScale from '../internal/utils/create-category-color-scale';
 import useContainerWidth from '../internal/utils/use-container-width';
 import { nodeContains } from '../internal/utils/dom';
-var PieChart = function PieChart(_a) {
-    var _b;
-    var _c = _a.variant, variant = _c === void 0 ? 'pie' : _c, _d = _a.size, size = _d === void 0 ? 'medium' : _d, _e = _a.hideTitles, hideTitles = _e === void 0 ? false : _e, _f = _a.hideDescriptions, hideDescriptions = _f === void 0 ? false : _f, _g = _a.hideLegend, hideLegend = _g === void 0 ? false : _g, _h = _a.hideFilter, hideFilter = _h === void 0 ? false : _h, _j = _a.statusType, statusType = _j === void 0 ? 'finished' : _j, _k = _a.data, externalData = _k === void 0 ? [] : _k, _l = _a.i18nStrings, i18nStrings = _l === void 0 ? {} : _l, controlledHighlightedSegment = _a.highlightedSegment, controlledVisibleSegments = _a.visibleSegments, controlledOnHighlightChange = _a.onHighlightChange, onFilterChange = _a.onFilterChange, additionalFilters = _a.additionalFilters, legendTitle = _a.legendTitle, _m = _a.detailPopoverSize, detailPopoverSize = _m === void 0 ? 'medium' : _m, props = __rest(_a, ["variant", "size", "hideTitles", "hideDescriptions", "hideLegend", "hideFilter", "statusType", "data", "i18nStrings", "highlightedSegment", "visibleSegments", "onHighlightChange", "onFilterChange", "additionalFilters", "legendTitle", "detailPopoverSize"]);
-    var _o = useBaseComponent('PieChart').__internalRootRef, __internalRootRef = _o === void 0 ? null : _o;
-    var baseProps = getBaseProps(props);
-    var isEmpty = !externalData || externalData.length === 0;
-    var containerAttr = __assign(__assign({}, baseProps), { className: clsx(baseProps.className, styles.root) });
-    var containerRef = useRef(null);
-    var _p = useContainerWidth(), containerWidth = _p[0], measureRef = _p[1];
-    var data = useMemo(function () {
-        var colors = createCategoryColorScale(externalData, undefined, function (it) { return it.color || null; });
-        return externalData.map(function (datum, i) { return ({
+const PieChart = function PieChart(_a) {
+    var { variant = 'pie', size = 'medium', hideTitles = false, hideDescriptions = false, hideLegend = false, hideFilter = false, statusType = 'finished', data: externalData = [], i18nStrings = {}, highlightedSegment: controlledHighlightedSegment, visibleSegments: controlledVisibleSegments, onHighlightChange: controlledOnHighlightChange, onFilterChange, additionalFilters, legendTitle, detailPopoverSize = 'medium' } = _a, props = __rest(_a, ["variant", "size", "hideTitles", "hideDescriptions", "hideLegend", "hideFilter", "statusType", "data", "i18nStrings", "highlightedSegment", "visibleSegments", "onHighlightChange", "onFilterChange", "additionalFilters", "legendTitle", "detailPopoverSize"]);
+    const { __internalRootRef = null } = useBaseComponent('PieChart');
+    const baseProps = getBaseProps(props);
+    const isEmpty = !externalData || externalData.length === 0;
+    const containerAttr = Object.assign(Object.assign({}, baseProps), { className: clsx(baseProps.className, styles.root) });
+    const containerRef = useRef(null);
+    const [containerWidth, measureRef] = useContainerWidth();
+    const data = useMemo(() => {
+        const colors = createCategoryColorScale(externalData, undefined, it => it.color || null);
+        return externalData.map((datum, i) => ({
             index: i,
             color: colors[i],
-            datum: datum
-        }); });
+            datum,
+        }));
     }, [externalData]);
-    var _q = useControllable(controlledHighlightedSegment, controlledOnHighlightChange, null, {
+    const [highlightedSegment = null, setHighlightedSegment] = useControllable(controlledHighlightedSegment, controlledOnHighlightChange, null, {
         componentName: 'PieChart',
         controlledProp: 'highlightedSegment',
-        changeHandler: 'onHighlightChange'
-    }), _r = _q[0], highlightedSegment = _r === void 0 ? null : _r, setHighlightedSegment = _q[1];
-    var _s = useState(highlightedSegment), legendSegment = _s[0], setLegendSegment = _s[1];
-    useEffect(function () {
+        changeHandler: 'onHighlightChange',
+    });
+    const [legendSegment, setLegendSegment] = useState(highlightedSegment);
+    useEffect(() => {
         setLegendSegment(controlledHighlightedSegment || null);
     }, [controlledHighlightedSegment]);
-    var _t = useControllable(controlledVisibleSegments, onFilterChange, externalData, {
+    const [visibleSegments, setVisibleSegments] = useControllable(controlledVisibleSegments, onFilterChange, externalData, {
         componentName: 'PieChart',
         controlledProp: 'visibleSegments',
-        changeHandler: 'onFilterChange'
-    }), visibleSegments = _t[0], setVisibleSegments = _t[1];
-    var _u = useState(null), pinnedSegment = _u[0], setPinnedSegment = _u[1];
-    var visibleData = useMemo(function () { return data.filter(function (d) { return (visibleSegments === null || visibleSegments === void 0 ? void 0 : visibleSegments.indexOf(d.datum)) !== -1; }); }, [data, visibleSegments]);
-    var filterItems = data === null || data === void 0 ? void 0 : data.map(function (data) { return ({
+        changeHandler: 'onFilterChange',
+    });
+    const [pinnedSegment, setPinnedSegment] = useState(null);
+    const visibleData = useMemo(() => data.filter(d => (visibleSegments === null || visibleSegments === void 0 ? void 0 : visibleSegments.indexOf(d.datum)) !== -1), [data, visibleSegments]);
+    const filterItems = data === null || data === void 0 ? void 0 : data.map(data => ({
         label: data.datum.title,
         color: data.color,
         type: 'rectangle',
-        datum: data.datum
-    }); });
-    var legendItems = filterItems.filter(function (d) { return (visibleSegments === null || visibleSegments === void 0 ? void 0 : visibleSegments.indexOf(d.datum)) !== -1; });
-    var filterChange = useCallback(function (selectedSeries) {
+        datum: data.datum,
+    }));
+    const legendItems = filterItems.filter(d => (visibleSegments === null || visibleSegments === void 0 ? void 0 : visibleSegments.indexOf(d.datum)) !== -1);
+    const filterChange = useCallback((selectedSeries) => {
         setVisibleSegments(selectedSeries);
         fireNonCancelableEvent(onFilterChange, {
-            visibleSegments: selectedSeries
+            visibleSegments: selectedSeries,
         });
     }, [setVisibleSegments, onFilterChange]);
-    var onHighlightChange = useCallback(function (segment) {
+    const onHighlightChange = useCallback((segment) => {
         setLegendSegment(segment);
         setHighlightedSegment(segment);
         fireNonCancelableEvent(controlledOnHighlightChange, { highlightedSegment: segment });
     }, [controlledOnHighlightChange, setHighlightedSegment]);
-    var onBlur = function (event) {
+    const onBlur = (event) => {
         if (event.relatedTarget && !nodeContains(containerRef.current, event.relatedTarget)) {
             highlightedSegment && onHighlightChange(null);
             setLegendSegment(null);
         }
     };
-    var mergedRef = useMergeRefs(containerRef, measureRef, __internalRootRef);
-    return (React.createElement("div", __assign({}, containerAttr, { ref: mergedRef, onBlur: onBlur }),
+    const mergedRef = useMergeRefs(containerRef, measureRef, __internalRootRef);
+    return (React.createElement("div", Object.assign({}, containerAttr, { ref: mergedRef, onBlur: onBlur }),
         statusType === 'finished' && !isEmpty && (React.createElement(InternalBox, { className: styles['filter-container'], margin: { bottom: 'l' } },
-            React.createElement(InternalSpaceBetween, { size: "l", direction: "horizontal", className: clsx((_b = {},
-                    _b[styles['has-default-filter']] = !hideFilter,
-                    _b)) },
+            React.createElement(InternalSpaceBetween, { size: "l", direction: "horizontal", className: clsx({
+                    [styles['has-default-filter']]: !hideFilter,
+                }) },
                 !hideFilter && (React.createElement(Filter, { series: filterItems, onChange: filterChange, selectedSeries: visibleSegments, i18nStrings: i18nStrings })),
                 additionalFilters))),
-        React.createElement(InternalPieChart, __assign({}, props, { variant: variant, size: size, data: externalData, visibleData: visibleData, width: containerWidth, statusType: statusType, hideTitles: hideTitles, hideDescriptions: hideDescriptions, hideLegend: hideLegend, hideFilter: hideFilter, additionalFilters: additionalFilters, i18nStrings: i18nStrings, onHighlightChange: onHighlightChange, highlightedSegment: highlightedSegment, legendSegment: legendSegment, pinnedSegment: pinnedSegment, setPinnedSegment: setPinnedSegment, detailPopoverSize: detailPopoverSize })),
+        React.createElement(InternalPieChart, Object.assign({}, props, { variant: variant, size: size, data: externalData, visibleData: visibleData, width: containerWidth, statusType: statusType, hideTitles: hideTitles, hideDescriptions: hideDescriptions, hideLegend: hideLegend, hideFilter: hideFilter, additionalFilters: additionalFilters, i18nStrings: i18nStrings, onHighlightChange: onHighlightChange, highlightedSegment: highlightedSegment, legendSegment: legendSegment, pinnedSegment: pinnedSegment, setPinnedSegment: setPinnedSegment, detailPopoverSize: detailPopoverSize })),
         !hideLegend && !isEmpty && statusType === 'finished' && (React.createElement(InternalBox, { margin: { top: 'm' } },
             React.createElement(Legend, { series: legendItems, highlightedSeries: legendSegment, legendTitle: legendTitle, ariaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.legendAriaLabel, onHighlightChange: onHighlightChange, plotContainerRef: containerRef })))));
 };

package/lib/internal/template/pie-chart/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/pie-chart/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport Legend, { ChartLegendProps } from '../internal/components/chart-legend';\nimport Filter, { ChartFilterProps } from '../internal/components/chart-filter';\nimport InternalSpaceBetween from '../space-between/internal';\nimport InternalBox from '../box/internal';\n\nimport InternalPieChart, { InternalChartDatum } from './pie-chart';\nimport { PieChartProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport createCategoryColorScale from '../internal/utils/create-category-color-scale';\nimport useContainerWidth from '../internal/utils/use-container-width';\nimport { nodeContains } from '../internal/utils/dom';\n\nexport { PieChartProps };\n\nconst PieChart = function PieChart<T extends PieChartProps.Datum = PieChartProps.Datum>({\n  variant = 'pie',\n  size = 'medium',\n  hideTitles = false,\n  hideDescriptions = false,\n  hideLegend = false,\n  hideFilter = false,\n  statusType = 'finished',\n  data: externalData = [],\n  i18nStrings = {},\n  highlightedSegment: controlledHighlightedSegment,\n  visibleSegments: controlledVisibleSegments,\n  onHighlightChange: controlledOnHighlightChange,\n  onFilterChange,\n  additionalFilters,\n  legendTitle,\n  detailPopoverSize = 'medium',\n  ...props\n}: PieChartProps<T>) {\n  const { __internalRootRef = null } = useBaseComponent('PieChart');\n  const baseProps = getBaseProps(props);\n  const isEmpty = !externalData || externalData.length === 0;\n  const containerAttr = {\n    ...baseProps,\n    className: clsx(baseProps.className, styles.root),\n  };\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [containerWidth, measureRef] = useContainerWidth();\n\n  const data: ReadonlyArray<InternalChartDatum<T>> = useMemo(() => {\n    const colors = createCategoryColorScale(externalData, undefined, it => it.color || null);\n\n    return externalData.map((datum, i) => ({\n      index: i,\n      color: colors[i],\n      datum,\n    }));\n  }, [externalData]);\n\n  const [highlightedSegment = null, setHighlightedSegment] = useControllable(\n    controlledHighlightedSegment,\n    controlledOnHighlightChange,\n    null,\n    {\n      componentName: 'PieChart',\n      controlledProp: 'highlightedSegment',\n      changeHandler: 'onHighlightChange',\n    }\n  );\n  const [legendSegment, setLegendSegment] = useState<null | T>(highlightedSegment);\n  useEffect(() => {\n    setLegendSegment(controlledHighlightedSegment || null);\n  }, [controlledHighlightedSegment]);\n\n  const [visibleSegments, setVisibleSegments] = useControllable(\n    controlledVisibleSegments,\n    onFilterChange,\n    externalData,\n    {\n      componentName: 'PieChart',\n      controlledProp: 'visibleSegments',\n      changeHandler: 'onFilterChange',\n    }\n  );\n\n  const [pinnedSegment, setPinnedSegment] = useState<T | null>(null);\n\n  const visibleData = useMemo(\n    () => data.filter(d => visibleSegments?.indexOf(d.datum) !== -1),\n    [data, visibleSegments]\n  );\n\n  const filterItems: ChartFilterProps<T>['series'] = data?.map(data => ({\n    label: data.datum.title,\n    color: data.color,\n    type: 'rectangle',\n    datum: data.datum,\n  }));\n\n  const legendItems: ChartLegendProps<T>['series'] = filterItems.filter(d => visibleSegments?.indexOf(d.datum) !== -1);\n\n  const filterChange = useCallback(\n    (selectedSeries: ReadonlyArray<T>) => {\n      setVisibleSegments(selectedSeries);\n      fireNonCancelableEvent(onFilterChange, {\n        visibleSegments: selectedSeries,\n      });\n    },\n    [setVisibleSegments, onFilterChange]\n  );\n\n  const onHighlightChange = useCallback(\n    (segment: T | null) => {\n      setLegendSegment(segment);\n      setHighlightedSegment(segment);\n      fireNonCancelableEvent(controlledOnHighlightChange, { highlightedSegment: segment });\n    },\n    [controlledOnHighlightChange, setHighlightedSegment]\n  );\n\n  const onBlur = (event: React.FocusEvent) => {\n    if (event.relatedTarget && !nodeContains(containerRef.current, event.relatedTarget)) {\n      highlightedSegment && onHighlightChange(null);\n      setLegendSegment(null);\n    }\n  };\n\n  const mergedRef = useMergeRefs(containerRef, measureRef, __internalRootRef);\n\n  return (\n    <div {...containerAttr} ref={mergedRef} onBlur={onBlur}>\n      {statusType === 'finished' && !isEmpty && (\n        <InternalBox className={styles['filter-container']} margin={{ bottom: 'l' }}>\n          <InternalSpaceBetween\n            size=\"l\"\n            direction=\"horizontal\"\n            className={clsx({\n              [styles['has-default-filter']]: !hideFilter,\n            })}\n          >\n            {!hideFilter && (\n              <Filter\n                series={filterItems}\n                onChange={filterChange}\n                selectedSeries={visibleSegments}\n                i18nStrings={i18nStrings}\n              />\n            )}\n            {additionalFilters}\n          </InternalSpaceBetween>\n        </InternalBox>\n      )}\n\n      <InternalPieChart\n        {...props}\n        variant={variant}\n        size={size}\n        data={externalData}\n        visibleData={visibleData}\n        width={containerWidth}\n        statusType={statusType}\n        hideTitles={hideTitles}\n        hideDescriptions={hideDescriptions}\n        hideLegend={hideLegend}\n        hideFilter={hideFilter}\n        additionalFilters={additionalFilters}\n        i18nStrings={i18nStrings}\n        onHighlightChange={onHighlightChange}\n        highlightedSegment={highlightedSegment}\n        legendSegment={legendSegment}\n        pinnedSegment={pinnedSegment}\n        setPinnedSegment={setPinnedSegment}\n        detailPopoverSize={detailPopoverSize}\n      />\n\n      {!hideLegend && !isEmpty && statusType === 'finished' && (\n        <InternalBox margin={{ top: 'm' }}>\n          <Legend<T>\n            series={legendItems}\n            highlightedSeries={legendSegment}\n            legendTitle={legendTitle}\n            ariaLabel={i18nStrings?.legendAriaLabel}\n            onHighlightChange={onHighlightChange}\n            plotContainerRef={containerRef}\n          />\n        </InternalBox>\n      )}\n    </div>\n  );\n};\n\napplyDisplayName(PieChart, 'PieChart');\nexport default PieChart;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/pie-chart/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport Legend, { ChartLegendProps } from '../internal/components/chart-legend';\nimport Filter, { ChartFilterProps } from '../internal/components/chart-filter';\nimport InternalSpaceBetween from '../space-between/internal';\nimport InternalBox from '../box/internal';\n\nimport InternalPieChart, { InternalChartDatum } from './pie-chart';\nimport { PieChartProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport createCategoryColorScale from '../internal/utils/create-category-color-scale';\nimport useContainerWidth from '../internal/utils/use-container-width';\nimport { nodeContains } from '../internal/utils/dom';\n\nexport { PieChartProps };\n\nconst PieChart = function PieChart<T extends PieChartProps.Datum = PieChartProps.Datum>({\n  variant = 'pie',\n  size = 'medium',\n  hideTitles = false,\n  hideDescriptions = false,\n  hideLegend = false,\n  hideFilter = false,\n  statusType = 'finished',\n  data: externalData = [],\n  i18nStrings = {},\n  highlightedSegment: controlledHighlightedSegment,\n  visibleSegments: controlledVisibleSegments,\n  onHighlightChange: controlledOnHighlightChange,\n  onFilterChange,\n  additionalFilters,\n  legendTitle,\n  detailPopoverSize = 'medium',\n  ...props\n}: PieChartProps<T>) {\n  const { __internalRootRef = null } = useBaseComponent('PieChart');\n  const baseProps = getBaseProps(props);\n  const isEmpty = !externalData || externalData.length === 0;\n  const containerAttr = {\n    ...baseProps,\n    className: clsx(baseProps.className, styles.root),\n  };\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [containerWidth, measureRef] = useContainerWidth();\n\n  const data: ReadonlyArray<InternalChartDatum<T>> = useMemo(() => {\n    const colors = createCategoryColorScale(externalData, undefined, it => it.color || null);\n\n    return externalData.map((datum, i) => ({\n      index: i,\n      color: colors[i],\n      datum,\n    }));\n  }, [externalData]);\n\n  const [highlightedSegment = null, setHighlightedSegment] = useControllable(\n    controlledHighlightedSegment,\n    controlledOnHighlightChange,\n    null,\n    {\n      componentName: 'PieChart',\n      controlledProp: 'highlightedSegment',\n      changeHandler: 'onHighlightChange',\n    }\n  );\n  const [legendSegment, setLegendSegment] = useState<null | T>(highlightedSegment);\n  useEffect(() => {\n    setLegendSegment(controlledHighlightedSegment || null);\n  }, [controlledHighlightedSegment]);\n\n  const [visibleSegments, setVisibleSegments] = useControllable(\n    controlledVisibleSegments,\n    onFilterChange,\n    externalData,\n    {\n      componentName: 'PieChart',\n      controlledProp: 'visibleSegments',\n      changeHandler: 'onFilterChange',\n    }\n  );\n\n  const [pinnedSegment, setPinnedSegment] = useState<T | null>(null);\n\n  const visibleData = useMemo(\n    () => data.filter(d => visibleSegments?.indexOf(d.datum) !== -1),\n    [data, visibleSegments]\n  );\n\n  const filterItems: ChartFilterProps<T>['series'] = data?.map(data => ({\n    label: data.datum.title,\n    color: data.color,\n    type: 'rectangle',\n    datum: data.datum,\n  }));\n\n  const legendItems: ChartLegendProps<T>['series'] = filterItems.filter(d => visibleSegments?.indexOf(d.datum) !== -1);\n\n  const filterChange = useCallback(\n    (selectedSeries: ReadonlyArray<T>) => {\n      setVisibleSegments(selectedSeries);\n      fireNonCancelableEvent(onFilterChange, {\n        visibleSegments: selectedSeries,\n      });\n    },\n    [setVisibleSegments, onFilterChange]\n  );\n\n  const onHighlightChange = useCallback(\n    (segment: T | null) => {\n      setLegendSegment(segment);\n      setHighlightedSegment(segment);\n      fireNonCancelableEvent(controlledOnHighlightChange, { highlightedSegment: segment });\n    },\n    [controlledOnHighlightChange, setHighlightedSegment]\n  );\n\n  const onBlur = (event: React.FocusEvent) => {\n    if (event.relatedTarget && !nodeContains(containerRef.current, event.relatedTarget)) {\n      highlightedSegment && onHighlightChange(null);\n      setLegendSegment(null);\n    }\n  };\n\n  const mergedRef = useMergeRefs(containerRef, measureRef, __internalRootRef);\n\n  return (\n    <div {...containerAttr} ref={mergedRef} onBlur={onBlur}>\n      {statusType === 'finished' && !isEmpty && (\n        <InternalBox className={styles['filter-container']} margin={{ bottom: 'l' }}>\n          <InternalSpaceBetween\n            size=\"l\"\n            direction=\"horizontal\"\n            className={clsx({\n              [styles['has-default-filter']]: !hideFilter,\n            })}\n          >\n            {!hideFilter && (\n              <Filter\n                series={filterItems}\n                onChange={filterChange}\n                selectedSeries={visibleSegments}\n                i18nStrings={i18nStrings}\n              />\n            )}\n            {additionalFilters}\n          </InternalSpaceBetween>\n        </InternalBox>\n      )}\n\n      <InternalPieChart\n        {...props}\n        variant={variant}\n        size={size}\n        data={externalData}\n        visibleData={visibleData}\n        width={containerWidth}\n        statusType={statusType}\n        hideTitles={hideTitles}\n        hideDescriptions={hideDescriptions}\n        hideLegend={hideLegend}\n        hideFilter={hideFilter}\n        additionalFilters={additionalFilters}\n        i18nStrings={i18nStrings}\n        onHighlightChange={onHighlightChange}\n        highlightedSegment={highlightedSegment}\n        legendSegment={legendSegment}\n        pinnedSegment={pinnedSegment}\n        setPinnedSegment={setPinnedSegment}\n        detailPopoverSize={detailPopoverSize}\n      />\n\n      {!hideLegend && !isEmpty && statusType === 'finished' && (\n        <InternalBox margin={{ top: 'm' }}>\n          <Legend<T>\n            series={legendItems}\n            highlightedSeries={legendSegment}\n            legendTitle={legendTitle}\n            ariaLabel={i18nStrings?.legendAriaLabel}\n            onHighlightChange={onHighlightChange}\n            plotContainerRef={containerRef}\n          />\n        </InternalBox>\n      )}\n    </div>\n  );\n};\n\napplyDisplayName(PieChart, 'PieChart');\nexport default PieChart;\n"]}

package/lib/internal/template/pie-chart/labels.js

@@ -7,8 +7,7 @@ import styles from './styles.css.js';
 import { dimensionsBySize, balanceLabelNodes } from './utils';
 import { useResizeObserver } from '../internal/hooks/container-queries';
 import ResponsiveText from './responsive-text';
-function LabelElement(_a) {
-    var x = _a.x, y = _a.y, hideTitles = _a.hideTitles, hideDescriptions = _a.hideDescriptions, rightSide = _a.rightSide, title = _a.title, description = _a.description, containerBoundaries = _a.containerBoundaries;
+function LabelElement({ x, y, hideTitles, hideDescriptions, rightSide, title, description, containerBoundaries, }) {
     return (
     // Reset the transform property to prepare for `balanceLabelNodes`.
     // The dataset attributes are also needed in the function for IE11 support.
@@ -16,75 +15,72 @@ function LabelElement(_a) {
         !hideTitles && (React.createElement(ResponsiveText, { x: x, y: y, rightSide: rightSide, containerBoundaries: containerBoundaries }, title)),
         !hideDescriptions && description && (React.createElement(ResponsiveText, { x: x, y: y + (hideTitles ? 0 : 18), rightSide: rightSide, className: styles.label__description, containerBoundaries: containerBoundaries }, description))));
 }
-export default (function (_a) {
-    var pieData = _a.pieData, size = _a.size, highlightedSegment = _a.highlightedSegment, segmentDescription = _a.segmentDescription, visibleDataSum = _a.visibleDataSum, hideTitles = _a.hideTitles, hideDescriptions = _a.hideDescriptions, containerRef = _a.containerRef;
-    var containerBoundaries = useElementBoundaries(containerRef);
-    var markers = useMemo(function () {
-        var _a = dimensionsBySize[size], radius = _a.outerRadius, innerLabelPadding = _a.innerLabelPadding;
+export default ({ pieData, size, highlightedSegment, segmentDescription, visibleDataSum, hideTitles, hideDescriptions, containerRef, }) => {
+    const containerBoundaries = useElementBoundaries(containerRef);
+    const markers = useMemo(() => {
+        const { outerRadius: radius, innerLabelPadding } = dimensionsBySize[size];
         // More arc factories for the label positioning
-        var arcMarkerStart = arc()
+        const arcMarkerStart = arc()
             .innerRadius(radius - 1)
             .outerRadius(radius - 1);
-        var arcMarkerBreak = arc()
+        const arcMarkerBreak = arc()
             .innerRadius(radius + innerLabelPadding)
             .outerRadius(radius + innerLabelPadding);
-        return pieData.map(function (datum, i) {
-            var labelDatum = pieData[i];
-            var midAngle = labelDatum.startAngle + (labelDatum.endAngle - labelDatum.startAngle) / 2;
+        return pieData.map((datum, i) => {
+            const labelDatum = pieData[i];
+            const midAngle = labelDatum.startAngle + (labelDatum.endAngle - labelDatum.startAngle) / 2;
             // Make the marker line longer if the segment is closer to the top or bottom of the chart
             arcMarkerBreak.outerRadius(radius + 20 * (0.5 * Math.cos(2 * midAngle) + 0.5));
             arcMarkerBreak.innerRadius(radius + 20 * (0.5 * Math.cos(2 * midAngle) + 0.5));
-            var _a = arcMarkerStart.centroid(datum), startX = _a[0], startY = _a[1];
-            var _b = arcMarkerBreak.centroid(datum), breakX = _b[0], breakY = _b[1];
-            var rightSide = midAngle < Math.PI;
-            var endX = (radius + 20) * (rightSide ? 1 : -1);
-            var textX = endX + 5 * (rightSide ? 1 : -1);
+            const [startX, startY] = arcMarkerStart.centroid(datum);
+            const [breakX, breakY] = arcMarkerBreak.centroid(datum);
+            const rightSide = midAngle < Math.PI;
+            const endX = (radius + 20) * (rightSide ? 1 : -1);
+            const textX = endX + 5 * (rightSide ? 1 : -1);
             return {
-                startX: startX,
-                startY: startY,
-                breakX: breakX,
-                breakY: breakY,
-                endX: endX,
+                startX,
+                startY,
+                breakX,
+                breakY,
+                endX,
                 endY: breakY,
-                textX: textX,
+                textX,
                 textY: breakY,
-                rightSide: rightSide,
-                datum: datum
+                rightSide,
+                datum,
             };
         });
     }, [pieData, size]);
-    var rootRef = useRef(null);
-    useLayoutEffect(function () {
+    const rootRef = useRef(null);
+    useLayoutEffect(() => {
         if (!rootRef.current) {
             return;
         }
         // Relax labels that are overlapping
-        var labelNodes = rootRef.current.querySelectorAll(".".concat(styles['label-text']));
+        const labelNodes = rootRef.current.querySelectorAll(`.${styles['label-text']}`);
         balanceLabelNodes(labelNodes, markers, false);
         balanceLabelNodes(labelNodes, markers, true);
     }, [markers, pieData]);
-    return (React.createElement("g", { className: styles.markers, "aria-hidden": "true", ref: rootRef }, markers.map(function (_a) {
-        var _b;
-        var startX = _a.startX, startY = _a.startY, breakX = _a.breakX, breakY = _a.breakY, endX = _a.endX, endY = _a.endY, textX = _a.textX, textY = _a.textY, rightSide = _a.rightSide, datum = _a.datum;
-        var segment = datum.data.datum;
-        var description = segmentDescription === null || segmentDescription === void 0 ? void 0 : segmentDescription(segment, visibleDataSum);
+    return (React.createElement("g", { className: styles.markers, "aria-hidden": "true", ref: rootRef }, markers.map(({ startX, startY, breakX, breakY, endX, endY, textX, textY, rightSide, datum }) => {
+        const segment = datum.data.datum;
+        const description = segmentDescription === null || segmentDescription === void 0 ? void 0 : segmentDescription(segment, visibleDataSum);
         if ((hideTitles && !description) || (hideDescriptions && !segment.title)) {
             return null;
         }
-        return (React.createElement("g", { key: datum.data.index, className: clsx(styles.label, (_b = {},
-                _b[styles['label--highlighted']] = highlightedSegment === segment,
-                _b[styles['label--dimmed']] = highlightedSegment !== null && highlightedSegment !== segment,
-                _b[styles['label--align-right']] = !rightSide,
-                _b)) },
+        return (React.createElement("g", { key: datum.data.index, className: clsx(styles.label, {
+                [styles['label--highlighted']]: highlightedSegment === segment,
+                [styles['label--dimmed']]: highlightedSegment !== null && highlightedSegment !== segment,
+                [styles['label--align-right']]: !rightSide,
+            }) },
             React.createElement("line", { x1: startX, y1: startY, x2: breakX, y2: breakY }),
             React.createElement("line", { x1: breakX, y1: breakY, x2: endX, y2: endY, className: styles['label-line'] }),
             React.createElement(LabelElement, { x: textX, y: textY, rightSide: rightSide, title: segment.title, description: description, hideTitles: hideTitles, hideDescriptions: hideDescriptions, containerBoundaries: containerBoundaries })));
     })));
-});
+};
 function useElementBoundaries(ref) {
-    var _a = useState({ left: 0, right: 0 }), state = _a[0], setState = _a[1];
-    useResizeObserver(ref, function (entry) {
-        var elementRect = entry.target.getBoundingClientRect();
+    const [state, setState] = useState({ left: 0, right: 0 });
+    useResizeObserver(ref, entry => {
+        const elementRect = entry.target.getBoundingClientRect();
         setState({ left: elementRect.left, right: elementRect.right });
     });
     return state;

package/lib/internal/template/pie-chart/labels.js.map

@@ -1 +1 @@
-{"version":3,"file":"labels.js","sourceRoot":"","sources":["../../../src/pie-chart/labels.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport { arc, PieArcDatum } from 'd3-shape';\n\nimport { PieChartProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { InternalChartDatum } from './pie-chart';\nimport { dimensionsBySize, balanceLabelNodes } from './utils';\nimport { useResizeObserver } from '../internal/hooks/container-queries';\nimport ResponsiveText from './responsive-text';\n\nexport interface LabelsProps<T> {\n  pieData: PieArcDatum<InternalChartDatum<T>>[];\n  visibleDataSum: number;\n  size: NonNullable<PieChartProps['size']>;\n  hideTitles: boolean;\n  hideDescriptions: boolean;\n  highlightedSegment: PieChartProps.Datum | null;\n  segmentDescription?: PieChartProps.SegmentDescriptionFunction<T>;\n  containerRef: React.RefObject<HTMLDivElement>;\n}\n\ninterface LabelElementProps {\n  x: number;\n  y: number;\n  rightSide: boolean;\n  hideTitles: boolean;\n  hideDescriptions: boolean;\n  title: PieChartProps.Datum['title'];\n  description?: string;\n  containerBoundaries: null | { left: number; right: number };\n}\n\nfunction LabelElement({\n  x,\n  y,\n  hideTitles,\n  hideDescriptions,\n  rightSide,\n  title,\n  description,\n  containerBoundaries,\n}: LabelElementProps) {\n  return (\n    // Reset the transform property to prepare for `balanceLabelNodes`.\n    // The dataset attributes are also needed in the function for IE11 support.\n    <g className={styles['label-text']} transform=\"\" data-x={x} data-y={y}>\n      {!hideTitles && (\n        <ResponsiveText x={x} y={y} rightSide={rightSide} containerBoundaries={containerBoundaries}>\n          {title}\n        </ResponsiveText>\n      )}\n      {!hideDescriptions && description && (\n        <ResponsiveText\n          x={x}\n          y={y + (hideTitles ? 0 : 18)}\n          rightSide={rightSide}\n          className={styles.label__description}\n          containerBoundaries={containerBoundaries}\n        >\n          {description}\n        </ResponsiveText>\n      )}\n    </g>\n  );\n}\n\nexport default <T extends PieChartProps.Datum>({\n  pieData,\n  size,\n  highlightedSegment,\n  segmentDescription,\n  visibleDataSum,\n  hideTitles,\n  hideDescriptions,\n  containerRef,\n}: LabelsProps<T>) => {\n  const containerBoundaries = useElementBoundaries(containerRef);\n\n  const markers = useMemo(() => {\n    const { outerRadius: radius, innerLabelPadding } = dimensionsBySize[size];\n\n    // More arc factories for the label positioning\n    const arcMarkerStart = arc<PieArcDatum<any>>()\n      .innerRadius(radius - 1)\n      .outerRadius(radius - 1);\n\n    const arcMarkerBreak = arc<PieArcDatum<any>>()\n      .innerRadius(radius + innerLabelPadding)\n      .outerRadius(radius + innerLabelPadding);\n\n    return pieData.map((datum, i) => {\n      const labelDatum = pieData[i];\n      const midAngle = labelDatum.startAngle + (labelDatum.endAngle - labelDatum.startAngle) / 2;\n\n      // Make the marker line longer if the segment is closer to the top or bottom of the chart\n      arcMarkerBreak.outerRadius(radius + 20 * (0.5 * Math.cos(2 * midAngle) + 0.5));\n      arcMarkerBreak.innerRadius(radius + 20 * (0.5 * Math.cos(2 * midAngle) + 0.5));\n      const [startX, startY] = arcMarkerStart.centroid(datum);\n      const [breakX, breakY] = arcMarkerBreak.centroid(datum);\n\n      const rightSide = midAngle < Math.PI;\n      const endX = (radius + 20) * (rightSide ? 1 : -1);\n      const textX = endX + 5 * (rightSide ? 1 : -1);\n\n      return {\n        startX,\n        startY,\n        breakX,\n        breakY,\n        endX,\n        endY: breakY,\n        textX,\n        textY: breakY,\n        rightSide,\n        datum,\n      };\n    });\n  }, [pieData, size]);\n\n  const rootRef = useRef<SVGGElement>(null);\n\n  useLayoutEffect(() => {\n    if (!rootRef.current) {\n      return;\n    }\n\n    // Relax labels that are overlapping\n    const labelNodes = rootRef.current.querySelectorAll<SVGGElement>(`.${styles['label-text']}`);\n    balanceLabelNodes(labelNodes, markers, false);\n    balanceLabelNodes(labelNodes, markers, true);\n  }, [markers, pieData]);\n\n  return (\n    <g className={styles.markers} aria-hidden=\"true\" ref={rootRef}>\n      {markers.map(({ startX, startY, breakX, breakY, endX, endY, textX, textY, rightSide, datum }) => {\n        const segment = datum.data.datum;\n        const description = segmentDescription?.(segment, visibleDataSum);\n        if ((hideTitles && !description) || (hideDescriptions && !segment.title)) {\n          return null;\n        }\n        return (\n          <g\n            key={datum.data.index}\n            className={clsx(styles.label, {\n              [styles['label--highlighted']]: highlightedSegment === segment,\n              [styles['label--dimmed']]: highlightedSegment !== null && highlightedSegment !== segment,\n              [styles['label--align-right']]: !rightSide,\n            })}\n          >\n            <line x1={startX} y1={startY} x2={breakX} y2={breakY} />\n            <line x1={breakX} y1={breakY} x2={endX} y2={endY} className={styles['label-line']} />\n            <LabelElement\n              x={textX}\n              y={textY}\n              rightSide={rightSide}\n              title={segment.title}\n              description={description}\n              hideTitles={hideTitles}\n              hideDescriptions={hideDescriptions}\n              containerBoundaries={containerBoundaries}\n            />\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n\nfunction useElementBoundaries(ref: React.RefObject<HTMLElement>): { left: number; right: number } {\n  const [state, setState] = useState({ left: 0, right: 0 });\n  useResizeObserver(ref, entry => {\n    const elementRect = entry.target.getBoundingClientRect();\n    setState({ left: elementRect.left, right: elementRect.right });\n  });\n  return state;\n}\n"]}
+{"version":3,"file":"labels.js","sourceRoot":"","sources":["../../../src/pie-chart/labels.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport { arc, PieArcDatum } from 'd3-shape';\n\nimport { PieChartProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { InternalChartDatum } from './pie-chart';\nimport { dimensionsBySize, balanceLabelNodes } from './utils';\nimport { useResizeObserver } from '../internal/hooks/container-queries';\nimport ResponsiveText from './responsive-text';\n\nexport interface LabelsProps<T> {\n  pieData: PieArcDatum<InternalChartDatum<T>>[];\n  visibleDataSum: number;\n  size: NonNullable<PieChartProps['size']>;\n  hideTitles: boolean;\n  hideDescriptions: boolean;\n  highlightedSegment: PieChartProps.Datum | null;\n  segmentDescription?: PieChartProps.SegmentDescriptionFunction<T>;\n  containerRef: React.RefObject<HTMLDivElement>;\n}\n\ninterface LabelElementProps {\n  x: number;\n  y: number;\n  rightSide: boolean;\n  hideTitles: boolean;\n  hideDescriptions: boolean;\n  title: PieChartProps.Datum['title'];\n  description?: string;\n  containerBoundaries: null | { left: number; right: number };\n}\n\nfunction LabelElement({\n  x,\n  y,\n  hideTitles,\n  hideDescriptions,\n  rightSide,\n  title,\n  description,\n  containerBoundaries,\n}: LabelElementProps) {\n  return (\n    // Reset the transform property to prepare for `balanceLabelNodes`.\n    // The dataset attributes are also needed in the function for IE11 support.\n    <g className={styles['label-text']} transform=\"\" data-x={x} data-y={y}>\n      {!hideTitles && (\n        <ResponsiveText x={x} y={y} rightSide={rightSide} containerBoundaries={containerBoundaries}>\n          {title}\n        </ResponsiveText>\n      )}\n      {!hideDescriptions && description && (\n        <ResponsiveText\n          x={x}\n          y={y + (hideTitles ? 0 : 18)}\n          rightSide={rightSide}\n          className={styles.label__description}\n          containerBoundaries={containerBoundaries}\n        >\n          {description}\n        </ResponsiveText>\n      )}\n    </g>\n  );\n}\n\nexport default <T extends PieChartProps.Datum>({\n  pieData,\n  size,\n  highlightedSegment,\n  segmentDescription,\n  visibleDataSum,\n  hideTitles,\n  hideDescriptions,\n  containerRef,\n}: LabelsProps<T>) => {\n  const containerBoundaries = useElementBoundaries(containerRef);\n\n  const markers = useMemo(() => {\n    const { outerRadius: radius, innerLabelPadding } = dimensionsBySize[size];\n\n    // More arc factories for the label positioning\n    const arcMarkerStart = arc<PieArcDatum<any>>()\n      .innerRadius(radius - 1)\n      .outerRadius(radius - 1);\n\n    const arcMarkerBreak = arc<PieArcDatum<any>>()\n      .innerRadius(radius + innerLabelPadding)\n      .outerRadius(radius + innerLabelPadding);\n\n    return pieData.map((datum, i) => {\n      const labelDatum = pieData[i];\n      const midAngle = labelDatum.startAngle + (labelDatum.endAngle - labelDatum.startAngle) / 2;\n\n      // Make the marker line longer if the segment is closer to the top or bottom of the chart\n      arcMarkerBreak.outerRadius(radius + 20 * (0.5 * Math.cos(2 * midAngle) + 0.5));\n      arcMarkerBreak.innerRadius(radius + 20 * (0.5 * Math.cos(2 * midAngle) + 0.5));\n      const [startX, startY] = arcMarkerStart.centroid(datum);\n      const [breakX, breakY] = arcMarkerBreak.centroid(datum);\n\n      const rightSide = midAngle < Math.PI;\n      const endX = (radius + 20) * (rightSide ? 1 : -1);\n      const textX = endX + 5 * (rightSide ? 1 : -1);\n\n      return {\n        startX,\n        startY,\n        breakX,\n        breakY,\n        endX,\n        endY: breakY,\n        textX,\n        textY: breakY,\n        rightSide,\n        datum,\n      };\n    });\n  }, [pieData, size]);\n\n  const rootRef = useRef<SVGGElement>(null);\n\n  useLayoutEffect(() => {\n    if (!rootRef.current) {\n      return;\n    }\n\n    // Relax labels that are overlapping\n    const labelNodes = rootRef.current.querySelectorAll<SVGGElement>(`.${styles['label-text']}`);\n    balanceLabelNodes(labelNodes, markers, false);\n    balanceLabelNodes(labelNodes, markers, true);\n  }, [markers, pieData]);\n\n  return (\n    <g className={styles.markers} aria-hidden=\"true\" ref={rootRef}>\n      {markers.map(({ startX, startY, breakX, breakY, endX, endY, textX, textY, rightSide, datum }) => {\n        const segment = datum.data.datum;\n        const description = segmentDescription?.(segment, visibleDataSum);\n        if ((hideTitles && !description) || (hideDescriptions && !segment.title)) {\n          return null;\n        }\n        return (\n          <g\n            key={datum.data.index}\n            className={clsx(styles.label, {\n              [styles['label--highlighted']]: highlightedSegment === segment,\n              [styles['label--dimmed']]: highlightedSegment !== null && highlightedSegment !== segment,\n              [styles['label--align-right']]: !rightSide,\n            })}\n          >\n            <line x1={startX} y1={startY} x2={breakX} y2={breakY} />\n            <line x1={breakX} y1={breakY} x2={endX} y2={endY} className={styles['label-line']} />\n            <LabelElement\n              x={textX}\n              y={textY}\n              rightSide={rightSide}\n              title={segment.title}\n              description={description}\n              hideTitles={hideTitles}\n              hideDescriptions={hideDescriptions}\n              containerBoundaries={containerBoundaries}\n            />\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n\nfunction useElementBoundaries(ref: React.RefObject<HTMLElement>): { left: number; right: number } {\n  const [state, setState] = useState({ left: 0, right: 0 });\n  useResizeObserver(ref, entry => {\n    const elementRect = entry.target.getBoundingClientRect();\n    setState({ left: elementRect.left, right: elementRect.right });\n  });\n  return state;\n}\n"]}