@cloudscape-design/components 3.0.0

package/pie-chart/pie-chart.js

@@ -0,0 +1,185 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { pie } from 'd3-shape';
+import { KeyCode } from '../internal/keycode';
+import { nodeContains } from '../internal/utils/dom';
+import { useUniqueId } from '../internal/hooks/use-unique-id';
+import ChartPopover from '../internal/components/chart-popover';
+import SeriesDetails from '../internal/components/chart-series-details';
+import SeriesMarker from '../internal/components/chart-series-marker';
+import ChartStatusContainer, { getChartStatus } from '../internal/components/chart-status-container';
+import InternalBox from '../box/internal';
+import Labels from './labels';
+import styles from './styles.css.js';
+import { defaultDetails, dimensionsBySize, refreshDimensionsBySize } from './utils';
+import Segments from './segments';
+import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
+import ChartPlot from '../internal/components/chart-plot';
+export default (function (_a) {
+    var _b;
+    var _c;
+    var variant = _a.variant, size = _a.size, i18nStrings = _a.i18nStrings, ariaLabel = _a.ariaLabel, ariaLabelledby = _a.ariaLabelledby, data = _a.data, visibleData = _a.visibleData, ariaDescription = _a.ariaDescription, innerMetricValue = _a.innerMetricValue, innerMetricDescription = _a.innerMetricDescription, hideTitles = _a.hideTitles, hideDescriptions = _a.hideDescriptions, detailPopoverContent = _a.detailPopoverContent, detailPopoverSize = _a.detailPopoverSize, width = _a.width, additionalFilters = _a.additionalFilters, hideFilter = _a.hideFilter, hideLegend = _a.hideLegend, statusType = _a.statusType, empty = _a.empty, noMatch = _a.noMatch, errorText = _a.errorText, recoveryText = _a.recoveryText, loadingText = _a.loadingText, onRecoveryClick = _a.onRecoveryClick, segmentDescription = _a.segmentDescription, highlightedSegment = _a.highlightedSegment, onHighlightChange = _a.onHighlightChange, legendSegment = _a.legendSegment, pinnedSegment = _a.pinnedSegment, setPinnedSegment = _a.setPinnedSegment;
+    var plotRef = useRef(null);
+    var containerRef = useRef(null);
+    var focusedSegmentRef = useRef(null);
+    var popoverTrackRef = useRef(null);
+    var isRefresh = useVisualRefresh(containerRef);
+    var dimensions = isRefresh ? refreshDimensionsBySize[size] : dimensionsBySize[size];
+    var radius = dimensions.outerRadius;
+    var hasLabels = !(hideTitles && hideDescriptions);
+    var height = 2 * (radius + dimensions.padding + (hasLabels ? dimensions.paddingLabels : 0));
+    // Inner content is only available for donut charts and the inner description is not displayed for small charts
+    var hasInnerContent = variant === 'donut' && (innerMetricValue || (innerMetricDescription && size !== 'small'));
+    var innerMetricId = useUniqueId('awsui-pie-chart__inner');
+    var _d = useState(false), isTooltipOpen = _d[0], setTooltipOpen = _d[1];
+    var _e = useState(), tooltipData = _e[0], setTooltipData = _e[1];
+    var _f = useMemo(function () {
+        var dataSum = visibleData.reduce(function (sum, d) { return sum + d.datum.value; }, 0);
+        var pieFactory = pie()
+            // Minimum 1% segment size
+            .value(function (d) { return (d.datum.value < dataSum / 100 ? dataSum / 100 : d.datum.value); })
+            .sort(null);
+        // Filter out segments with value of zero or below
+        var pieData = pieFactory(visibleData.filter(function (d) { return d.datum.value > 0; }));
+        return { pieData: pieData, dataSum: dataSum };
+    }, [visibleData]), pieData = _f.pieData, dataSum = _f.dataSum;
+    var highlightedSegmentIndex = useMemo(function () {
+        for (var index = 0; index < pieData.length; index++) {
+            if (pieData[index].data.datum === highlightedSegment) {
+                return index;
+            }
+        }
+        return null;
+    }, [pieData, highlightedSegment]);
+    var detailFunction = detailPopoverContent || defaultDetails(i18nStrings);
+    var details = tooltipData ? detailFunction(tooltipData.datum, dataSum) : [];
+    var tooltipContent = tooltipData && React.createElement(SeriesDetails, { details: details });
+    var _g = getChartStatus({ externalData: data, visibleData: pieData, statusType: statusType }), isEmpty = _g.isEmpty, showChart = _g.showChart;
+    // Pie charts have a special condition for empty/noMatch due to how zero-value segments are handled.
+    var isNoMatch = isEmpty && visibleData.length !== data.length;
+    var reserveLegendSpace = !showChart && !hideLegend;
+    var reserveFilterSpace = statusType !== 'finished' && !isNoMatch && (!hideFilter || additionalFilters);
+    var popoverDismissedRecently = useRef(false);
+    var highlightSegment = useCallback(function (internalDatum) {
+        var segment = internalDatum.datum;
+        if (segment !== highlightedSegment) {
+            onHighlightChange(segment);
+        }
+        if (popoverTrackRef.current) {
+            setTooltipData({
+                datum: internalDatum.datum,
+                series: {
+                    color: internalDatum.color,
+                    index: internalDatum.index,
+                    label: internalDatum.datum.title,
+                    markerType: 'rectangle'
+                },
+                trackRef: popoverTrackRef
+            });
+            setTooltipOpen(true);
+        }
+    }, [highlightedSegment, setTooltipOpen, onHighlightChange]);
+    var clearHighlightedSegment = useCallback(function () {
+        setTooltipOpen(false);
+        onHighlightChange(null);
+    }, [onHighlightChange, setTooltipOpen]);
+    var onClick = useCallback(function (internalDatum) {
+        if (pinnedSegment === internalDatum.datum) {
+            setPinnedSegment(null);
+            clearHighlightedSegment();
+        }
+        else {
+            setPinnedSegment(internalDatum.datum);
+            highlightSegment(internalDatum);
+        }
+    }, [pinnedSegment, clearHighlightedSegment, setPinnedSegment, highlightSegment]);
+    var onMouseOver = useCallback(function (internalDatum) {
+        if (pinnedSegment !== null) {
+            return;
+        }
+        highlightSegment(internalDatum);
+    }, [pinnedSegment, highlightSegment]);
+    var onMouseOut = useCallback(function () {
+        if (pinnedSegment !== null) {
+            return;
+        }
+        clearHighlightedSegment();
+    }, [pinnedSegment, clearHighlightedSegment]);
+    var onKeyDown = useCallback(function (event) {
+        if (event.keyCode !== KeyCode.right && event.keyCode !== KeyCode.left && event.keyCode !== KeyCode.enter) {
+            return;
+        }
+        event.preventDefault();
+        var nextIndex = highlightedSegmentIndex || 0;
+        var MAX = pieData.length - 1;
+        if (event.keyCode === KeyCode.right) {
+            nextIndex++;
+            if (nextIndex > MAX) {
+                nextIndex = 0;
+            }
+        }
+        else if (event.keyCode === KeyCode.left) {
+            nextIndex--;
+            if (nextIndex < 0) {
+                nextIndex = MAX;
+            }
+        }
+        if (event.keyCode === KeyCode.enter) {
+            setPinnedSegment(pieData[nextIndex].data.datum);
+        }
+        highlightSegment(pieData[nextIndex].data);
+    }, [setPinnedSegment, highlightSegment, pieData, highlightedSegmentIndex]);
+    var onFocus = useCallback(function (_event, target) {
+        // We need to make sure that we do not re-show the popover when we focus the segment after the popover is dismissed.
+        // Normally we would check `event.relatedTarget` for the previously focused element,
+        // but this is not supported for SVG elements in IE11. The workaround is this `popoverDismissedRecently` ref.
+        if (pinnedSegment !== null || popoverDismissedRecently.current || target === 'mouse') {
+            return;
+        }
+        var segment = highlightedSegment || legendSegment || pieData[0].data.datum;
+        var matched = pieData.filter(function (d) { return d.data.datum === segment; });
+        highlightSegment(matched[0].data);
+    }, [pinnedSegment, pieData, highlightSegment, highlightedSegment, legendSegment]);
+    var onBlur = useCallback(function (event) {
+        var blurTarget = event.relatedTarget || event.target;
+        if (blurTarget === null || !(blurTarget instanceof Element) || !nodeContains(containerRef.current, blurTarget)) {
+            // We only need to close the tooltip and remove the pinned segment so that we keep track of the current
+            // highlighted legendSeries. using clearHighlightedSegment() would set the legendSeries to null, in that case
+            // using Keyboard Tab will always highlight the first legend item in the legend component.
+            setTooltipOpen(false);
+            setPinnedSegment(null);
+        }
+    }, [setPinnedSegment]);
+    var onPopoverDismiss = function (outsideClick) {
+        setTooltipOpen(false);
+        setPinnedSegment(null);
+        if (!outsideClick) {
+            // The delay is needed to bypass focus events caused by click or keypress needed to unpin the popover.
+            setTimeout(function () {
+                popoverDismissedRecently.current = true;
+                plotRef.current.focusApplication();
+                popoverDismissedRecently.current = false;
+            }, 0);
+        }
+    };
+    return (React.createElement("div", { className: clsx(styles.content, styles["content--".concat(size)], (_b = {},
+            _b[styles['content--without-labels']] = !hasLabels,
+            _b[styles['content--reserve-filter']] = reserveFilterSpace,
+            _b[styles['content--reserve-legend']] = reserveLegendSpace,
+            _b)) },
+        React.createElement(ChartStatusContainer, { isEmpty: isEmpty, isNoMatch: isNoMatch, showChart: showChart, statusType: statusType, empty: empty, noMatch: noMatch, loadingText: loadingText, errorText: errorText, recoveryText: recoveryText, onRecoveryClick: onRecoveryClick }),
+        showChart && (React.createElement("div", { className: styles['chart-container'], ref: containerRef },
+            React.createElement(ChartPlot, { ref: plotRef, width: width, height: height, transform: "translate(".concat(width / 2, " ").concat(height / 2, ")"), isPrecise: true, isClickable: !isTooltipOpen, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescription: ariaDescription, ariaDescribedby: hasInnerContent ? innerMetricId : undefined, ariaRoleDescription: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.chartAriaRoleDescription, ariaLiveRegion: tooltipContent, activeElementRef: focusedSegmentRef, activeElementKey: highlightedSegmentIndex === null || highlightedSegmentIndex === void 0 ? void 0 : highlightedSegmentIndex.toString(), onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown },
+                React.createElement(Segments, { pieData: pieData, size: size, variant: variant, containerRef: containerRef, focusedSegmentRef: focusedSegmentRef, popoverTrackRef: popoverTrackRef, highlightedSegment: highlightedSegment, segmentAriaRoleDescription: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.segmentAriaRoleDescription, onClick: onClick, onMouseOver: onMouseOver, onMouseOut: onMouseOut }),
+                hasLabels && (React.createElement(Labels, { pieData: pieData, size: size, segmentDescription: segmentDescription, visibleDataSum: dataSum, hideTitles: hideTitles, hideDescriptions: hideDescriptions, highlightedSegment: highlightedSegment, containerRef: containerRef }))),
+            hasInnerContent && (React.createElement("div", { className: styles['inner-content'], id: innerMetricId },
+                innerMetricValue && (React.createElement(InternalBox, { variant: size === 'small' ? 'h3' : 'h1', tagOverride: "div", color: "inherit", padding: "n" }, innerMetricValue)),
+                innerMetricDescription && size !== 'small' && (React.createElement(InternalBox, { variant: "h3", color: "text-body-secondary", tagOverride: "div", padding: "n" }, innerMetricDescription)))),
+            isTooltipOpen && tooltipData && (React.createElement(ChartPopover, { title: tooltipData.series && (React.createElement(InternalBox, { className: styles['popover-header'], variant: "strong" },
+                    React.createElement(SeriesMarker, { color: tooltipData.series.color, type: tooltipData.series.markerType }),
+                    ' ',
+                    tooltipData.series.label)), trackRef: tooltipData.trackRef, trackKey: tooltipData.series.index, dismissButton: pinnedSegment !== null, dismissAriaLabel: i18nStrings.detailPopoverDismissAriaLabel, onDismiss: onPopoverDismiss, container: ((_c = plotRef.current) === null || _c === void 0 ? void 0 : _c.svg) || null, size: detailPopoverSize }, tooltipContent))))));
+});
+//# sourceMappingURL=pie-chart.js.map

package/pie-chart/pie-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pie-chart.js","sourceRoot":"","sources":["../../../src/pie-chart/pie-chart.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, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport { pie } from 'd3-shape';\n\nimport { KeyCode } from '../internal/keycode';\nimport { nodeContains } from '../internal/utils/dom';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport ChartPopover from '../internal/components/chart-popover';\nimport SeriesDetails from '../internal/components/chart-series-details';\nimport SeriesMarker from '../internal/components/chart-series-marker';\nimport ChartStatusContainer, { getChartStatus } from '../internal/components/chart-status-container';\nimport InternalBox from '../box/internal';\n\nimport Labels from './labels';\nimport { PieChartProps, SeriesInfo } from './interfaces';\nimport styles from './styles.css.js';\nimport { defaultDetails, dimensionsBySize, refreshDimensionsBySize } from './utils';\nimport Segments from './segments';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport ChartPlot, { ChartPlotRef } from '../internal/components/chart-plot';\nimport { SomeRequired } from '../internal/types';\n\nexport interface InternalChartDatum<T> {\n  index: number;\n  color: string;\n  datum: Readonly<T>;\n}\n\ninterface InternalPieChartProps<T extends PieChartProps.Datum>\n  extends SomeRequired<\n    Omit<PieChartProps<T>, 'onHighlightChange'>,\n    'variant' | 'size' | 'i18nStrings' | 'hideTitles' | 'hideDescriptions' | 'statusType'\n  > {\n  visibleData: Array<InternalChartDatum<T>>;\n  width: number;\n\n  highlightedSegment: T | null;\n  onHighlightChange: (segment: null | T) => void;\n\n  legendSegment: T | null;\n\n  pinnedSegment: T | null;\n  setPinnedSegment: React.Dispatch<React.SetStateAction<T | null>>;\n}\n\nexport interface TooltipData<T> {\n  datum: T;\n  trackRef: React.RefObject<SVGElement>;\n  series: SeriesInfo;\n}\n\nexport default <T extends PieChartProps.Datum>({\n  variant,\n  size,\n  i18nStrings,\n  ariaLabel,\n  ariaLabelledby,\n  data,\n  visibleData,\n  ariaDescription,\n  innerMetricValue,\n  innerMetricDescription,\n  hideTitles,\n  hideDescriptions,\n  detailPopoverContent,\n  detailPopoverSize,\n  width,\n  additionalFilters,\n  hideFilter,\n  hideLegend,\n  statusType,\n  empty,\n  noMatch,\n  errorText,\n  recoveryText,\n  loadingText,\n  onRecoveryClick,\n  segmentDescription,\n  highlightedSegment,\n  onHighlightChange,\n  legendSegment,\n  pinnedSegment,\n  setPinnedSegment,\n}: InternalPieChartProps<T>) => {\n  const plotRef = useRef<ChartPlotRef>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const focusedSegmentRef = useRef<SVGGElement>(null);\n  const popoverTrackRef = useRef<SVGCircleElement>(null);\n  const isRefresh = useVisualRefresh(containerRef);\n\n  const dimensions = isRefresh ? refreshDimensionsBySize[size] : dimensionsBySize[size];\n  const radius = dimensions.outerRadius;\n\n  const hasLabels = !(hideTitles && hideDescriptions);\n  const height = 2 * (radius + dimensions.padding + (hasLabels ? dimensions.paddingLabels : 0));\n\n  // Inner content is only available for donut charts and the inner description is not displayed for small charts\n  const hasInnerContent = variant === 'donut' && (innerMetricValue || (innerMetricDescription && size !== 'small'));\n\n  const innerMetricId = useUniqueId('awsui-pie-chart__inner');\n\n  const [isTooltipOpen, setTooltipOpen] = useState<boolean>(false);\n  const [tooltipData, setTooltipData] = useState<TooltipData<T>>();\n\n  const { pieData, dataSum } = useMemo(() => {\n    const dataSum = visibleData.reduce((sum, d) => sum + d.datum.value, 0);\n\n    const pieFactory = pie<InternalChartDatum<T>>()\n      // Minimum 1% segment size\n      .value(d => (d.datum.value < dataSum / 100 ? dataSum / 100 : d.datum.value))\n      .sort(null);\n\n    // Filter out segments with value of zero or below\n    const pieData = pieFactory(visibleData.filter(d => d.datum.value > 0));\n\n    return { pieData, dataSum };\n  }, [visibleData]);\n\n  const highlightedSegmentIndex = useMemo(() => {\n    for (let index = 0; index < pieData.length; index++) {\n      if (pieData[index].data.datum === highlightedSegment) {\n        return index;\n      }\n    }\n    return null;\n  }, [pieData, highlightedSegment]);\n\n  const detailFunction = detailPopoverContent || defaultDetails(i18nStrings);\n  const details = tooltipData ? detailFunction(tooltipData.datum, dataSum) : [];\n  const tooltipContent = tooltipData && <SeriesDetails details={details} />;\n\n  const { isEmpty, showChart } = getChartStatus({ externalData: data, visibleData: pieData, statusType });\n\n  // Pie charts have a special condition for empty/noMatch due to how zero-value segments are handled.\n  const isNoMatch = isEmpty && visibleData.length !== data.length;\n\n  const reserveLegendSpace = !showChart && !hideLegend;\n  const reserveFilterSpace = statusType !== 'finished' && !isNoMatch && (!hideFilter || additionalFilters);\n\n  const popoverDismissedRecently = useRef(false);\n\n  const highlightSegment = useCallback(\n    (internalDatum: InternalChartDatum<T>) => {\n      const segment = internalDatum.datum;\n      if (segment !== highlightedSegment) {\n        onHighlightChange(segment);\n      }\n\n      if (popoverTrackRef.current) {\n        setTooltipData({\n          datum: internalDatum.datum,\n          series: {\n            color: internalDatum.color,\n            index: internalDatum.index,\n            label: internalDatum.datum.title,\n            markerType: 'rectangle',\n          },\n          trackRef: popoverTrackRef,\n        });\n        setTooltipOpen(true);\n      }\n    },\n    [highlightedSegment, setTooltipOpen, onHighlightChange]\n  );\n  const clearHighlightedSegment = useCallback(() => {\n    setTooltipOpen(false);\n    onHighlightChange(null);\n  }, [onHighlightChange, setTooltipOpen]);\n\n  const onClick = useCallback(\n    (internalDatum: InternalChartDatum<T>) => {\n      if (pinnedSegment === internalDatum.datum) {\n        setPinnedSegment(null);\n        clearHighlightedSegment();\n      } else {\n        setPinnedSegment(internalDatum.datum);\n        highlightSegment(internalDatum);\n      }\n    },\n    [pinnedSegment, clearHighlightedSegment, setPinnedSegment, highlightSegment]\n  );\n  const onMouseOver = useCallback(\n    (internalDatum: InternalChartDatum<T>) => {\n      if (pinnedSegment !== null) {\n        return;\n      }\n      highlightSegment(internalDatum);\n    },\n    [pinnedSegment, highlightSegment]\n  );\n  const onMouseOut = useCallback(() => {\n    if (pinnedSegment !== null) {\n      return;\n    }\n\n    clearHighlightedSegment();\n  }, [pinnedSegment, clearHighlightedSegment]);\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.keyCode !== KeyCode.right && event.keyCode !== KeyCode.left && event.keyCode !== KeyCode.enter) {\n        return;\n      }\n\n      event.preventDefault();\n\n      let nextIndex = highlightedSegmentIndex || 0;\n      const MAX = pieData.length - 1;\n      if (event.keyCode === KeyCode.right) {\n        nextIndex++;\n        if (nextIndex > MAX) {\n          nextIndex = 0;\n        }\n      } else if (event.keyCode === KeyCode.left) {\n        nextIndex--;\n        if (nextIndex < 0) {\n          nextIndex = MAX;\n        }\n      }\n      if (event.keyCode === KeyCode.enter) {\n        setPinnedSegment(pieData[nextIndex].data.datum);\n      }\n      highlightSegment(pieData[nextIndex].data);\n    },\n    [setPinnedSegment, highlightSegment, pieData, highlightedSegmentIndex]\n  );\n  const onFocus = useCallback(\n    (_event: any, target: 'keyboard' | 'mouse') => {\n      // We need to make sure that we do not re-show the popover when we focus the segment after the popover is dismissed.\n      // Normally we would check `event.relatedTarget` for the previously focused element,\n      // but this is not supported for SVG elements in IE11. The workaround is this `popoverDismissedRecently` ref.\n      if (pinnedSegment !== null || popoverDismissedRecently.current || target === 'mouse') {\n        return;\n      }\n\n      const segment = highlightedSegment || legendSegment || pieData[0].data.datum;\n      const matched = pieData.filter(d => d.data.datum === segment);\n      highlightSegment(matched[0].data);\n    },\n    [pinnedSegment, pieData, highlightSegment, highlightedSegment, legendSegment]\n  );\n\n  const onBlur = useCallback(\n    (event: React.FocusEvent) => {\n      const blurTarget = event.relatedTarget || event.target;\n      if (blurTarget === null || !(blurTarget instanceof Element) || !nodeContains(containerRef.current, blurTarget)) {\n        // We only need to close the tooltip and remove the pinned segment so that we keep track of the current\n        // highlighted legendSeries. using clearHighlightedSegment() would set the legendSeries to null, in that case\n        // using Keyboard Tab will always highlight the first legend item in the legend component.\n        setTooltipOpen(false);\n        setPinnedSegment(null);\n      }\n    },\n    [setPinnedSegment]\n  );\n  const onPopoverDismiss = (outsideClick?: boolean) => {\n    setTooltipOpen(false);\n    setPinnedSegment(null);\n\n    if (!outsideClick) {\n      // The delay is needed to bypass focus events caused by click or keypress needed to unpin the popover.\n      setTimeout(() => {\n        popoverDismissedRecently.current = true;\n        plotRef.current!.focusApplication();\n        popoverDismissedRecently.current = false;\n      }, 0);\n    }\n  };\n\n  return (\n    <div\n      className={clsx(styles.content, styles[`content--${size}`], {\n        [styles['content--without-labels']]: !hasLabels,\n        [styles['content--reserve-filter']]: reserveFilterSpace,\n        [styles['content--reserve-legend']]: reserveLegendSpace,\n      })}\n    >\n      <ChartStatusContainer\n        isEmpty={isEmpty}\n        isNoMatch={isNoMatch}\n        showChart={showChart}\n        statusType={statusType}\n        empty={empty}\n        noMatch={noMatch}\n        loadingText={loadingText}\n        errorText={errorText}\n        recoveryText={recoveryText}\n        onRecoveryClick={onRecoveryClick}\n      />\n      {showChart && (\n        <div className={styles['chart-container']} ref={containerRef}>\n          <ChartPlot\n            ref={plotRef}\n            width={width}\n            height={height}\n            transform={`translate(${width / 2} ${height / 2})`}\n            isPrecise={true}\n            isClickable={!isTooltipOpen}\n            ariaLabel={ariaLabel}\n            ariaLabelledby={ariaLabelledby}\n            ariaDescription={ariaDescription}\n            ariaDescribedby={hasInnerContent ? innerMetricId : undefined}\n            ariaRoleDescription={i18nStrings?.chartAriaRoleDescription}\n            ariaLiveRegion={tooltipContent}\n            activeElementRef={focusedSegmentRef}\n            activeElementKey={highlightedSegmentIndex?.toString()}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onKeyDown={onKeyDown}\n          >\n            <Segments\n              pieData={pieData}\n              size={size}\n              variant={variant}\n              containerRef={containerRef}\n              focusedSegmentRef={focusedSegmentRef}\n              popoverTrackRef={popoverTrackRef}\n              highlightedSegment={highlightedSegment}\n              segmentAriaRoleDescription={i18nStrings?.segmentAriaRoleDescription}\n              onClick={onClick}\n              onMouseOver={onMouseOver}\n              onMouseOut={onMouseOut}\n            />\n            {hasLabels && (\n              <Labels\n                pieData={pieData}\n                size={size}\n                segmentDescription={segmentDescription}\n                visibleDataSum={dataSum}\n                hideTitles={hideTitles}\n                hideDescriptions={hideDescriptions}\n                highlightedSegment={highlightedSegment}\n                containerRef={containerRef}\n              />\n            )}\n          </ChartPlot>\n          {hasInnerContent && (\n            <div className={styles['inner-content']} id={innerMetricId}>\n              {innerMetricValue && (\n                <InternalBox variant={size === 'small' ? 'h3' : 'h1'} tagOverride=\"div\" color=\"inherit\" padding=\"n\">\n                  {innerMetricValue}\n                </InternalBox>\n              )}\n              {innerMetricDescription && size !== 'small' && (\n                <InternalBox variant=\"h3\" color=\"text-body-secondary\" tagOverride=\"div\" padding=\"n\">\n                  {innerMetricDescription}\n                </InternalBox>\n              )}\n            </div>\n          )}\n          {isTooltipOpen && tooltipData && (\n            <ChartPopover\n              title={\n                tooltipData.series && (\n                  <InternalBox className={styles['popover-header']} variant=\"strong\">\n                    <SeriesMarker color={tooltipData.series.color} type={tooltipData.series.markerType} />{' '}\n                    {tooltipData.series.label}\n                  </InternalBox>\n                )\n              }\n              trackRef={tooltipData.trackRef}\n              trackKey={tooltipData.series.index}\n              dismissButton={pinnedSegment !== null}\n              dismissAriaLabel={i18nStrings.detailPopoverDismissAriaLabel}\n              onDismiss={onPopoverDismiss}\n              container={plotRef.current?.svg || null}\n              size={detailPopoverSize}\n            >\n              {tooltipContent}\n            </ChartPopover>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n"]}

package/pie-chart/responsive-text.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface ResponsiveTextProps {
+    x: number;
+    y: number;
+    rightSide?: boolean;
+    className?: string;
+    children: string;
+    containerBoundaries: null | {
+        left: number;
+        right: number;
+    };
+}
+declare const _default: React.MemoExoticComponent<typeof ResponsiveText>;
+export default _default;
+declare function ResponsiveText({ x, y, rightSide, className, children, containerBoundaries }: ResponsiveTextProps): JSX.Element;
+//# sourceMappingURL=responsive-text.d.ts.map

package/pie-chart/responsive-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive-text.d.ts","sourceRoot":"","sources":["../../../src/pie-chart/responsive-text.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAEvD,UAAU,mBAAmB;IAC3B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,mBAAmB,EAAE,IAAI,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAC7D;;AAED,wBAAoC;AAEpC,iBAAS,cAAc,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,mBAAmB,EAAE,EAAE,mBAAmB,eAmCzG"}

package/pie-chart/responsive-text.js

@@ -0,0 +1,52 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { memo, useEffect, useRef } from 'react';
+export default memo(ResponsiveText);
+function ResponsiveText(_a) {
+    var x = _a.x, y = _a.y, rightSide = _a.rightSide, className = _a.className, children = _a.children, containerBoundaries = _a.containerBoundaries;
+    var actualRef = useRef(null);
+    var virtualRef = useRef(null);
+    // Determine the visible width of the text and if necessary truncate it until it fits.
+    useEffect(function () {
+        // The debouncing is necessary for visual smoothness.
+        var timeoutId = setTimeout(function () {
+            var groupRect = virtualRef.current.getBoundingClientRect();
+            var visibleWidth = containerBoundaries ? getVisibleWidth(groupRect, containerBoundaries) : 0;
+            renderTextContent(actualRef.current, children, visibleWidth);
+        }, 25);
+        return function () { return clearTimeout(timeoutId); };
+    });
+    return (React.createElement(React.Fragment, null,
+        React.createElement("text", { ref: virtualRef, x: x, y: y, style: { textAnchor: rightSide ? 'start' : 'end', visibility: 'hidden' }, "aria-hidden": "true", className: className }, children),
+        React.createElement("text", { ref: actualRef, x: x, y: y, style: { textAnchor: rightSide ? 'start' : 'end' }, className: className }, children)));
+}
+function getVisibleWidth(element, container) {
+    if (element.left < container.left) {
+        return element.right - container.left;
+    }
+    else if (element.right > container.right) {
+        return container.right - element.left;
+    }
+    else {
+        return container.right - container.left;
+    }
+}
+function renderTextContent(textNode, text, visibleWidth) {
+    var visibleLength = text.length;
+    while (visibleLength >= 0) {
+        textNode.textContent = truncateText(text, visibleLength);
+        if (!textNode.getComputedTextLength || textNode.getComputedTextLength() <= visibleWidth) {
+            return;
+        }
+        else {
+            visibleLength--;
+        }
+    }
+}
+function truncateText(text, maxLength) {
+    if (text.length === maxLength) {
+        return text;
+    }
+    return text.slice(0, maxLength) + '…';
+}
+//# sourceMappingURL=responsive-text.js.map

package/pie-chart/responsive-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive-text.js","sourceRoot":"","sources":["../../../src/pie-chart/responsive-text.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, { memo, useEffect, useRef } from 'react';\n\ninterface ResponsiveTextProps {\n  x: number;\n  y: number;\n  rightSide?: boolean;\n  className?: string;\n  children: string;\n  containerBoundaries: null | { left: number; right: number };\n}\n\nexport default memo(ResponsiveText);\n\nfunction ResponsiveText({ x, y, rightSide, className, children, containerBoundaries }: ResponsiveTextProps) {\n  const actualRef = useRef<SVGTextElement>(null);\n  const virtualRef = useRef<SVGTextElement>(null);\n\n  // Determine the visible width of the text and if necessary truncate it until it fits.\n  useEffect(() => {\n    // The debouncing is necessary for visual smoothness.\n    const timeoutId = setTimeout(() => {\n      const groupRect = virtualRef.current!.getBoundingClientRect();\n      const visibleWidth = containerBoundaries ? getVisibleWidth(groupRect, containerBoundaries) : 0;\n      renderTextContent(actualRef.current!, children, visibleWidth);\n    }, 25);\n    return () => clearTimeout(timeoutId);\n  });\n\n  return (\n    <>\n      {/* Invisible sample text used for measurement */}\n      <text\n        ref={virtualRef}\n        x={x}\n        y={y}\n        style={{ textAnchor: rightSide ? 'start' : 'end', visibility: 'hidden' }}\n        aria-hidden=\"true\"\n        className={className}\n      >\n        {children}\n      </text>\n\n      {/* Text node to render truncated text into */}\n      <text ref={actualRef} x={x} y={y} style={{ textAnchor: rightSide ? 'start' : 'end' }} className={className}>\n        {children}\n      </text>\n    </>\n  );\n}\n\nfunction getVisibleWidth(element: { left: number; right: number }, container: { left: number; right: number }): number {\n  if (element.left < container.left) {\n    return element.right - container.left;\n  } else if (element.right > container.right) {\n    return container.right - element.left;\n  } else {\n    return container.right - container.left;\n  }\n}\n\nfunction renderTextContent(textNode: SVGTextElement, text: string, visibleWidth: number) {\n  let visibleLength = text.length;\n  while (visibleLength >= 0) {\n    textNode.textContent = truncateText(text, visibleLength);\n    if (!textNode.getComputedTextLength || textNode.getComputedTextLength() <= visibleWidth) {\n      return;\n    } else {\n      visibleLength--;\n    }\n  }\n}\n\nfunction truncateText(text: string, maxLength: number) {\n  if (text.length === maxLength) {\n    return text;\n  }\n  return text.slice(0, maxLength) + '…';\n}\n"]}

package/pie-chart/segments.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PieArcDatum } from 'd3-shape';
+import { PieChartProps } from './interfaces';
+import { InternalChartDatum } from './pie-chart';
+interface SegmentsProps<T> {
+    pieData: Array<PieArcDatum<InternalChartDatum<T>>>;
+    highlightedSegment: T | null;
+    size: NonNullable<PieChartProps['size']>;
+    variant: PieChartProps['variant'];
+    containerRef: React.RefObject<HTMLDivElement>;
+    focusedSegmentRef: React.RefObject<SVGGElement>;
+    popoverTrackRef: React.RefObject<SVGCircleElement>;
+    segmentAriaRoleDescription?: string;
+    onClick: (datum: InternalChartDatum<T>) => void;
+    onMouseOver: (datum: InternalChartDatum<T>) => void;
+    onMouseOut: () => void;
+}
+export default function Segments<T extends PieChartProps.Datum>({ pieData, highlightedSegment, size, variant, containerRef, focusedSegmentRef, popoverTrackRef, segmentAriaRoleDescription, onClick, onMouseOver, onMouseOut, }: SegmentsProps<T>): JSX.Element;
+export {};
+//# sourceMappingURL=segments.d.ts.map

package/pie-chart/segments.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segments.d.ts","sourceRoot":"","sources":["../../../src/pie-chart/segments.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAO,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAKjD,UAAU,aAAa,CAAC,CAAC;IACvB,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACnD,kBAAkB,EAAE,CAAC,GAAG,IAAI,CAAC;IAC7B,IAAI,EAAE,WAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;IACzC,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAClC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC9C,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAChD,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACnD,0BAA0B,CAAC,EAAE,MAAM,CAAC;IAEpC,OAAO,EAAE,CAAC,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAChD,WAAW,EAAE,CAAC,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACpD,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,CAAC,SAAS,aAAa,CAAC,KAAK,EAAE,EAC9D,OAAO,EACP,kBAAkB,EAClB,IAAI,EACJ,OAAO,EACP,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,0BAA0B,EAC1B,OAAO,EACP,WAAW,EACX,UAAU,GACX,EAAE,aAAa,CAAC,CAAC,CAAC,eAqElB"}

package/pie-chart/segments.js

@@ -0,0 +1,56 @@
+import { __assign } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useMemo } from 'react';
+import { arc } from 'd3-shape';
+import { dimensionsBySize, refreshDimensionsBySize } from './utils';
+import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
+import styles from './styles.css.js';
+import clsx from 'clsx';
+export default function Segments(_a) {
+    var pieData = _a.pieData, highlightedSegment = _a.highlightedSegment, size = _a.size, variant = _a.variant, containerRef = _a.containerRef, focusedSegmentRef = _a.focusedSegmentRef, popoverTrackRef = _a.popoverTrackRef, segmentAriaRoleDescription = _a.segmentAriaRoleDescription, onClick = _a.onClick, onMouseOver = _a.onMouseOver, onMouseOut = _a.onMouseOut;
+    var isRefresh = useVisualRefresh(containerRef);
+    var _b = useMemo(function () {
+        var dimensions = isRefresh ? refreshDimensionsBySize[size] : dimensionsBySize[size];
+        var radius = dimensions.outerRadius;
+        var innerRadius = variant === 'pie' ? 0 : dimensions.innerRadius;
+        var cornerRadius = dimensions.cornerRadius || 0;
+        var arcFactory = arc()
+            .innerRadius(innerRadius)
+            .outerRadius(radius)
+            .cornerRadius(cornerRadius);
+        var highlightedArcFactory = arc()
+            .innerRadius(radius + 4)
+            .outerRadius(radius + 6);
+        return {
+            arcFactory: arcFactory,
+            highlightedArcFactory: highlightedArcFactory
+        };
+    }, [size, variant, isRefresh]), arcFactory = _b.arcFactory, highlightedArcFactory = _b.highlightedArcFactory;
+    var centroid = useMemo(function () {
+        for (var _i = 0, pieData_1 = pieData; _i < pieData_1.length; _i++) {
+            var datum = pieData_1[_i];
+            if (datum.data.datum === highlightedSegment) {
+                var _a = arcFactory.centroid(datum), centroidLeft = _a[0], centroidTop = _a[1];
+                return { cx: centroidLeft, cy: centroidTop };
+            }
+        }
+        return null;
+    }, [highlightedSegment, pieData, arcFactory]);
+    return (React.createElement("g", { onMouseLeave: function () { return onMouseOut(); } },
+        pieData.map(function (datum) {
+            var _a;
+            var isHighlighted = highlightedSegment === datum.data.datum;
+            var isDimmed = highlightedSegment !== null && !isHighlighted;
+            var arcPath = arcFactory(datum) || undefined;
+            var highlightedPath = highlightedArcFactory(datum) || undefined;
+            return (React.createElement("g", { key: datum.data.index, onClick: function () { return onClick(datum.data); }, onMouseOver: function () { return onMouseOver(datum.data); }, className: clsx(styles.segment, (_a = {},
+                    _a[styles['segment--highlighted']] = isHighlighted,
+                    _a[styles['segment--dimmed']] = isDimmed,
+                    _a)), ref: isHighlighted ? focusedSegmentRef : undefined, "aria-label": "".concat(datum.data.datum.title, " (").concat(datum.data.datum.value, ")"), role: "button", "aria-roledescription": segmentAriaRoleDescription },
+                React.createElement("path", { d: arcPath, fill: datum.data.color, className: styles.segment__path, "aria-hidden": "true" }),
+                React.createElement("path", { d: highlightedPath, fill: datum.data.color, className: clsx(styles.segment__path, styles.segment__highlight), "aria-hidden": "true" })));
+        }),
+        React.createElement("circle", __assign({}, centroid, { ref: popoverTrackRef, r: "1", opacity: "0", "aria-hidden": "true" }))));
+}
+//# sourceMappingURL=segments.js.map

package/pie-chart/segments.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segments.js","sourceRoot":"","sources":["../../../src/pie-chart/segments.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, { useMemo } from 'react';\nimport { arc, PieArcDatum } from 'd3-shape';\n\nimport { PieChartProps } from './interfaces';\nimport { dimensionsBySize, refreshDimensionsBySize } from './utils';\nimport { InternalChartDatum } from './pie-chart';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\n\ninterface SegmentsProps<T> {\n  pieData: Array<PieArcDatum<InternalChartDatum<T>>>;\n  highlightedSegment: T | null;\n  size: NonNullable<PieChartProps['size']>;\n  variant: PieChartProps['variant'];\n  containerRef: React.RefObject<HTMLDivElement>;\n  focusedSegmentRef: React.RefObject<SVGGElement>;\n  popoverTrackRef: React.RefObject<SVGCircleElement>;\n  segmentAriaRoleDescription?: string;\n\n  onClick: (datum: InternalChartDatum<T>) => void;\n  onMouseOver: (datum: InternalChartDatum<T>) => void;\n  onMouseOut: () => void;\n}\n\nexport default function Segments<T extends PieChartProps.Datum>({\n  pieData,\n  highlightedSegment,\n  size,\n  variant,\n  containerRef,\n  focusedSegmentRef,\n  popoverTrackRef,\n  segmentAriaRoleDescription,\n  onClick,\n  onMouseOver,\n  onMouseOut,\n}: SegmentsProps<T>) {\n  const isRefresh = useVisualRefresh(containerRef);\n\n  const { arcFactory, highlightedArcFactory } = useMemo(() => {\n    const dimensions = isRefresh ? refreshDimensionsBySize[size] : dimensionsBySize[size];\n    const radius = dimensions.outerRadius;\n    const innerRadius = variant === 'pie' ? 0 : dimensions.innerRadius;\n    const cornerRadius = dimensions.cornerRadius || 0;\n\n    const arcFactory = arc<PieArcDatum<InternalChartDatum<any>>>()\n      .innerRadius(innerRadius)\n      .outerRadius(radius)\n      .cornerRadius(cornerRadius);\n\n    const highlightedArcFactory = arc<PieArcDatum<InternalChartDatum<any>>>()\n      .innerRadius(radius + 4)\n      .outerRadius(radius + 6);\n\n    return {\n      arcFactory,\n      highlightedArcFactory,\n    };\n  }, [size, variant, isRefresh]);\n\n  const centroid = useMemo(() => {\n    for (const datum of pieData) {\n      if (datum.data.datum === highlightedSegment) {\n        const [centroidLeft, centroidTop] = arcFactory.centroid(datum);\n        return { cx: centroidLeft, cy: centroidTop };\n      }\n    }\n    return null;\n  }, [highlightedSegment, pieData, arcFactory]);\n\n  return (\n    <g onMouseLeave={() => onMouseOut()}>\n      {pieData.map(datum => {\n        const isHighlighted = highlightedSegment === datum.data.datum;\n        const isDimmed = highlightedSegment !== null && !isHighlighted;\n        const arcPath = arcFactory(datum) || undefined;\n        const highlightedPath = highlightedArcFactory(datum) || undefined;\n        return (\n          <g\n            key={datum.data.index}\n            onClick={() => onClick(datum.data)}\n            onMouseOver={() => onMouseOver(datum.data)}\n            className={clsx(styles.segment, {\n              [styles['segment--highlighted']]: isHighlighted,\n              [styles['segment--dimmed']]: isDimmed,\n            })}\n            ref={isHighlighted ? focusedSegmentRef : undefined}\n            aria-label={`${datum.data.datum.title} (${datum.data.datum.value})`}\n            role=\"button\"\n            aria-roledescription={segmentAriaRoleDescription}\n          >\n            <path d={arcPath} fill={datum.data.color} className={styles.segment__path} aria-hidden=\"true\" />\n            <path\n              d={highlightedPath}\n              fill={datum.data.color}\n              className={clsx(styles.segment__path, styles.segment__highlight)}\n              aria-hidden=\"true\"\n            />\n          </g>\n        );\n      })}\n\n      <circle {...centroid} ref={popoverTrackRef} r=\"1\" opacity=\"0\" aria-hidden=\"true\" />\n    </g>\n  );\n}\n"]}

package/pie-chart/styles.css.js

@@ -0,0 +1,32 @@
+
+    import './styles.scoped.css';
+    export default {
+  "segment__path": "awsui_segment__path_1edmh_19evm_97",
+  "segment": "awsui_segment_1edmh_19evm_97",
+  "segment__hover": "awsui_segment__hover_1edmh_19evm_124",
+  "label": "awsui_label_1edmh_19evm_138",
+  "root": "awsui_root_1edmh_19evm_156",
+  "filter-container": "awsui_filter-container_1edmh_19evm_168",
+  "has-default-filter": "awsui_has-default-filter_1edmh_19evm_172",
+  "content": "awsui_content_1edmh_19evm_176",
+  "content--small": "awsui_content--small_1edmh_19evm_182",
+  "content--without-labels": "awsui_content--without-labels_1edmh_19evm_185",
+  "content--medium": "awsui_content--medium_1edmh_19evm_188",
+  "content--large": "awsui_content--large_1edmh_19evm_194",
+  "content--reserve-filter": "awsui_content--reserve-filter_1edmh_19evm_200",
+  "content--reserve-legend": "awsui_content--reserve-legend_1edmh_19evm_203",
+  "status-container": "awsui_status-container_1edmh_19evm_207",
+  "chart-container": "awsui_chart-container_1edmh_19evm_211",
+  "inner-content": "awsui_inner-content_1edmh_19evm_216",
+  "segment__highlight": "awsui_segment__highlight_1edmh_19evm_230",
+  "segment--dimmed": "awsui_segment--dimmed_1edmh_19evm_245",
+  "segment--highlighted": "awsui_segment--highlighted_1edmh_19evm_248",
+  "label--dimmed": "awsui_label--dimmed_1edmh_19evm_265",
+  "label--align-right": "awsui_label--align-right_1edmh_19evm_268",
+  "label-text": "awsui_label-text_1edmh_19evm_276",
+  "label__description": "awsui_label__description_1edmh_19evm_282",
+  "label-line": "awsui_label-line_1edmh_19evm_289",
+  "label--highlighted": "awsui_label--highlighted_1edmh_19evm_293",
+  "popover-header": "awsui_popover-header_1edmh_19evm_297"
+};
+