@cloudscape-design/components 3.0.340 → 3.0.342

package/pie-chart/segments.js.map

@@ -1 +1 @@
-{"version":3,"file":"segments.js","sourceRoot":"lib/default/","sources":["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';\nimport { useInternalI18n } from '../internal/i18n/context';\n\ninterface SegmentsProps<T> {\n  pieData: Array<PieArcDatum<InternalChartDatum<T>>>;\n  highlightedSegment: T | null;\n  size: NonNullable<PieChartProps['size']>;\n  variant: PieChartProps['variant'];\n  focusedSegmentRef: React.RefObject<SVGGElement>;\n  popoverTrackRef: React.RefObject<SVGCircleElement>;\n  segmentAriaRoleDescription?: string;\n\n  onMouseDown: (datum: InternalChartDatum<T>) => void;\n  onMouseOver: (datum: InternalChartDatum<T>) => void;\n  onMouseOut: (event: React.MouseEvent<SVGElement>) => void;\n}\n\nexport default function Segments<T extends PieChartProps.Datum>({\n  pieData,\n  highlightedSegment,\n  size,\n  variant,\n  focusedSegmentRef,\n  popoverTrackRef,\n  segmentAriaRoleDescription,\n  onMouseDown,\n  onMouseOver,\n  onMouseOut,\n}: SegmentsProps<T>) {\n  const i18n = useInternalI18n('pie-chart');\n  const isRefresh = useVisualRefresh();\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={event => onMouseOut(event)}>\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            onMouseDown={e => {\n              onMouseDown(datum.data);\n              e.preventDefault();\n            }}\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={i18n('i18nStrings.segmentAriaRoleDescription', 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"]}
+{"version":3,"file":"segments.js","sourceRoot":"lib/default/","sources":["pie-chart/segments.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,GAAG,EAAe,MAAM,UAAU,CAAC;AAK5C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAe3D,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAgC,EAC9D,OAAO,EACP,kBAAkB,EAClB,UAAU,EACV,OAAO,EACP,iBAAiB,EACjB,eAAe,EACf,0BAA0B,EAC1B,WAAW,EACX,WAAW,EACX,UAAU,GACO;IACjB,MAAM,IAAI,GAAG,eAAe,CAAC,WAAW,CAAC,CAAC;IAE1C,MAAM,EAAE,UAAU,EAAE,qBAAqB,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE;QACzD,MAAM,MAAM,GAAG,UAAU,CAAC,WAAW,CAAC;QACtC,MAAM,WAAW,GAAG,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,WAAW,CAAC;QACnE,MAAM,YAAY,GAAG,UAAU,CAAC,YAAY,IAAI,CAAC,CAAC;QAElD,MAAM,UAAU,GAAG,GAAG,EAAwC;aAC3D,WAAW,CAAC,WAAW,CAAC;aACxB,WAAW,CAAC,MAAM,CAAC;aACnB,YAAY,CAAC,YAAY,CAAC,CAAC;QAE9B,MAAM,qBAAqB,GAAG,GAAG,EAAwC;aACtE,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC;aACvB,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAE3B,OAAO;YACL,UAAU;YACV,qBAAqB;SACtB,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAE1B,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;YAC3B,IAAI,KAAK,CAAC,IAAI,CAAC,KAAK,KAAK,kBAAkB,EAAE;gBAC3C,MAAM,CAAC,YAAY,EAAE,WAAW,CAAC,GAAG,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;gBAC/D,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC;aAC9C;SACF;QACD,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,kBAAkB,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAE9C,OAAO,CACL,2BAAG,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC;QACxC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;YACnB,MAAM,aAAa,GAAG,kBAAkB,KAAK,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;YAC9D,MAAM,QAAQ,GAAG,kBAAkB,KAAK,IAAI,IAAI,CAAC,aAAa,CAAC;YAC/D,MAAM,OAAO,GAAG,UAAU,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC;YAC/C,MAAM,eAAe,GAAG,qBAAqB,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC;YAClE,OAAO,CACL,2BACE,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,EACrB,WAAW,EAAE,CAAC,CAAC,EAAE;oBACf,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;oBACxB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACrB,CAAC,EACD,WAAW,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,EAC1C,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;oBAC9B,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,EAAE,aAAa;oBAC/C,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,QAAQ;iBACtC,CAAC,EACF,GAAG,EAAE,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,gBACtC,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EACnE,IAAI,EAAC,QAAQ,0BACS,IAAI,CAAC,wCAAwC,EAAE,0BAA0B,CAAC;gBAEhG,8BAAM,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,aAAa,iBAAc,MAAM,GAAG;gBAChG,8BACE,CAAC,EAAE,eAAe,EAClB,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,EACtB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,kBAAkB,CAAC,iBACpD,MAAM,GAClB,CACA,CACL,CAAC;QACJ,CAAC,CAAC;QAEF,gDAAY,QAAQ,IAAE,GAAG,EAAE,eAAe,EAAE,CAAC,EAAC,GAAG,EAAC,OAAO,EAAC,GAAG,iBAAa,MAAM,IAAG,CACjF,CACL,CAAC;AACJ,CAAC","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 { Dimension } from './utils';\nimport { InternalChartDatum } from './pie-chart';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\nimport { useInternalI18n } from '../internal/i18n/context';\n\ninterface SegmentsProps<T> {\n  pieData: Array<PieArcDatum<InternalChartDatum<T>>>;\n  highlightedSegment: T | null;\n  dimensions: Dimension;\n  variant: PieChartProps['variant'];\n  focusedSegmentRef: React.RefObject<SVGGElement>;\n  popoverTrackRef: React.RefObject<SVGCircleElement>;\n  segmentAriaRoleDescription?: string;\n  onMouseDown: (datum: InternalChartDatum<T>) => void;\n  onMouseOver: (datum: InternalChartDatum<T>) => void;\n  onMouseOut: (event: React.MouseEvent<SVGElement>) => void;\n}\n\nexport default function Segments<T extends PieChartProps.Datum>({\n  pieData,\n  highlightedSegment,\n  dimensions,\n  variant,\n  focusedSegmentRef,\n  popoverTrackRef,\n  segmentAriaRoleDescription,\n  onMouseDown,\n  onMouseOver,\n  onMouseOut,\n}: SegmentsProps<T>) {\n  const i18n = useInternalI18n('pie-chart');\n\n  const { arcFactory, highlightedArcFactory } = useMemo(() => {\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  }, [dimensions, variant]);\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={event => onMouseOut(event)}>\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            onMouseDown={e => {\n              onMouseDown(datum.data);\n              e.preventDefault();\n            }}\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={i18n('i18nStrings.segmentAriaRoleDescription', 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

@@ -1,28 +1,32 @@
 
     import './styles.scoped.css';
     export default {
-  "segment__path": "awsui_segment__path_1edmh_1r7fz_97",
-  "segment": "awsui_segment_1edmh_1r7fz_97",
-  "segment__hover": "awsui_segment__hover_1edmh_1r7fz_124",
-  "label": "awsui_label_1edmh_1r7fz_138",
-  "root": "awsui_root_1edmh_1r7fz_156",
-  "content": "awsui_content_1edmh_1r7fz_160",
-  "content--small": "awsui_content--small_1edmh_1r7fz_160",
-  "content--without-labels": "awsui_content--without-labels_1edmh_1r7fz_163",
-  "content--medium": "awsui_content--medium_1edmh_1r7fz_166",
-  "content--large": "awsui_content--large_1edmh_1r7fz_172",
-  "status-container": "awsui_status-container_1edmh_1r7fz_179",
-  "chart-container": "awsui_chart-container_1edmh_1r7fz_183",
-  "inner-content": "awsui_inner-content_1edmh_1r7fz_188",
-  "segment__highlight": "awsui_segment__highlight_1edmh_1r7fz_202",
-  "segment--dimmed": "awsui_segment--dimmed_1edmh_1r7fz_217",
-  "segment--highlighted": "awsui_segment--highlighted_1edmh_1r7fz_220",
-  "label--dimmed": "awsui_label--dimmed_1edmh_1r7fz_237",
-  "label--align-right": "awsui_label--align-right_1edmh_1r7fz_240",
-  "label-text": "awsui_label-text_1edmh_1r7fz_248",
-  "label__description": "awsui_label__description_1edmh_1r7fz_256",
-  "label-line": "awsui_label-line_1edmh_1r7fz_263",
-  "label--highlighted": "awsui_label--highlighted_1edmh_1r7fz_267",
-  "popover-header": "awsui_popover-header_1edmh_1r7fz_271"
+  "segment__path": "awsui_segment__path_1edmh_1ng0v_97",
+  "segment": "awsui_segment_1edmh_1ng0v_97",
+  "segment__hover": "awsui_segment__hover_1edmh_1ng0v_124",
+  "label": "awsui_label_1edmh_1ng0v_138",
+  "root": "awsui_root_1edmh_1ng0v_156",
+  "content": "awsui_content_1edmh_1ng0v_160",
+  "content--small": "awsui_content--small_1edmh_1ng0v_160",
+  "content--without-labels": "awsui_content--without-labels_1edmh_1ng0v_163",
+  "content--medium": "awsui_content--medium_1edmh_1ng0v_166",
+  "content--large": "awsui_content--large_1edmh_1ng0v_172",
+  "content--fit-height": "awsui_content--fit-height_1edmh_1ng0v_179",
+  "status-container": "awsui_status-container_1edmh_1ng0v_183",
+  "chart-container": "awsui_chart-container_1edmh_1ng0v_187",
+  "chart-container--fit-height": "awsui_chart-container--fit-height_1edmh_1ng0v_191",
+  "chart-container-chart-plot": "awsui_chart-container-chart-plot_1edmh_1ng0v_196",
+  "chart-container-chart-plot--fit-height": "awsui_chart-container-chart-plot--fit-height_1edmh_1ng0v_199",
+  "inner-content": "awsui_inner-content_1edmh_1ng0v_208",
+  "segment__highlight": "awsui_segment__highlight_1edmh_1ng0v_222",
+  "segment--dimmed": "awsui_segment--dimmed_1edmh_1ng0v_237",
+  "segment--highlighted": "awsui_segment--highlighted_1edmh_1ng0v_240",
+  "label--dimmed": "awsui_label--dimmed_1edmh_1ng0v_257",
+  "label--align-right": "awsui_label--align-right_1edmh_1ng0v_260",
+  "label-text": "awsui_label-text_1edmh_1ng0v_268",
+  "label__description": "awsui_label__description_1edmh_1ng0v_276",
+  "label-line": "awsui_label-line_1edmh_1ng0v_283",
+  "label--highlighted": "awsui_label--highlighted_1edmh_1ng0v_287",
+  "popover-header": "awsui_popover-header_1edmh_1ng0v_291"
 };
   

package/pie-chart/styles.scoped.css

@@ -94,57 +94,57 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_segment__path_1edmh_1r7fz_97:not(#\9) {
+.awsui_segment__path_1edmh_1ng0v_97:not(#\9) {
   transition: opacity var(--motion-duration-transition-quick-0viajb, 90ms) var(--motion-easing-transition-quick-191occ, linear);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_segment__path_1edmh_1r7fz_97:not(#\9) {
+  .awsui_segment__path_1edmh_1ng0v_97:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_segment__path_1edmh_1r7fz_97:not(#\9), .awsui-mode-entering .awsui_segment__path_1edmh_1r7fz_97:not(#\9) {
+.awsui-motion-disabled .awsui_segment__path_1edmh_1ng0v_97:not(#\9), .awsui-mode-entering .awsui_segment__path_1edmh_1ng0v_97:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_segment_1edmh_1r7fz_97:not(#\9) {
+.awsui_segment_1edmh_1ng0v_97:not(#\9) {
   transition: opacity var(--motion-duration-transition-quick-0viajb, 90ms) var(--motion-easing-transition-quick-191occ, linear);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_segment_1edmh_1r7fz_97:not(#\9) {
+  .awsui_segment_1edmh_1ng0v_97:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_segment_1edmh_1r7fz_97:not(#\9), .awsui-mode-entering .awsui_segment_1edmh_1r7fz_97:not(#\9) {
+.awsui-motion-disabled .awsui_segment_1edmh_1ng0v_97:not(#\9), .awsui-mode-entering .awsui_segment_1edmh_1ng0v_97:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_segment_1edmh_1r7fz_97 > .awsui_segment__hover_1edmh_1r7fz_124:not(#\9) {
+.awsui_segment_1edmh_1ng0v_97 > .awsui_segment__hover_1edmh_1ng0v_124:not(#\9) {
   transition: opacity var(--motion-duration-transition-quick-0viajb, 90ms) var(--motion-easing-transition-quick-191occ, linear);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_segment_1edmh_1r7fz_97 > .awsui_segment__hover_1edmh_1r7fz_124:not(#\9) {
+  .awsui_segment_1edmh_1ng0v_97 > .awsui_segment__hover_1edmh_1ng0v_124:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_segment_1edmh_1r7fz_97 > .awsui_segment__hover_1edmh_1r7fz_124:not(#\9), .awsui-mode-entering .awsui_segment_1edmh_1r7fz_97 > .awsui_segment__hover_1edmh_1r7fz_124:not(#\9) {
+.awsui-motion-disabled .awsui_segment_1edmh_1ng0v_97 > .awsui_segment__hover_1edmh_1ng0v_124:not(#\9), .awsui-mode-entering .awsui_segment_1edmh_1ng0v_97 > .awsui_segment__hover_1edmh_1ng0v_124:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_label_1edmh_1r7fz_138:not(#\9) {
+.awsui_label_1edmh_1ng0v_138:not(#\9) {
   transition: opacity var(--motion-duration-transition-quick-0viajb, 90ms) var(--motion-easing-transition-quick-191occ, linear);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_label_1edmh_1r7fz_138:not(#\9) {
+  .awsui_label_1edmh_1ng0v_138:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_label_1edmh_1r7fz_138:not(#\9), .awsui-mode-entering .awsui_label_1edmh_1r7fz_138:not(#\9) {
+.awsui-motion-disabled .awsui_label_1edmh_1ng0v_138:not(#\9), .awsui-mode-entering .awsui_label_1edmh_1ng0v_138:not(#\9) {
   animation: none;
   transition: none;
 }
@@ -153,39 +153,59 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_1edmh_1r7fz_156:not(#\9) {
+.awsui_root_1edmh_1ng0v_156:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_content_1edmh_1r7fz_160.awsui_content--small_1edmh_1r7fz_160:not(#\9) {
+.awsui_content_1edmh_1ng0v_160.awsui_content--small_1edmh_1ng0v_160:not(#\9) {
   min-height: calc(2 * (50px + var(--space-xs-edba2s, 8px) + calc(2 * var(--font-body-m-line-height-ghizru, 20px))));
 }
-.awsui_content_1edmh_1r7fz_160.awsui_content--small_1edmh_1r7fz_160.awsui_content--without-labels_1edmh_1r7fz_163:not(#\9) {
+.awsui_content_1edmh_1ng0v_160.awsui_content--small_1edmh_1ng0v_160.awsui_content--without-labels_1edmh_1ng0v_163:not(#\9) {
   min-height: calc(2 * (50px + var(--space-xs-edba2s, 8px)));
 }
-.awsui_content_1edmh_1r7fz_160.awsui_content--medium_1edmh_1r7fz_166:not(#\9) {
+.awsui_content_1edmh_1ng0v_160.awsui_content--medium_1edmh_1ng0v_166:not(#\9) {
   min-height: calc(2 * (100px + var(--space-s-hdd878, 12px) + calc(2 * var(--font-body-m-line-height-ghizru, 20px))));
 }
-.awsui_content_1edmh_1r7fz_160.awsui_content--medium_1edmh_1r7fz_166.awsui_content--without-labels_1edmh_1r7fz_163:not(#\9) {
+.awsui_content_1edmh_1ng0v_160.awsui_content--medium_1edmh_1ng0v_166.awsui_content--without-labels_1edmh_1ng0v_163:not(#\9) {
   min-height: calc(2 * (100px + var(--space-s-hdd878, 12px)));
 }
-.awsui_content_1edmh_1r7fz_160.awsui_content--large_1edmh_1r7fz_172:not(#\9) {
+.awsui_content_1edmh_1ng0v_160.awsui_content--large_1edmh_1ng0v_172:not(#\9) {
   min-height: calc(2 * (140px + var(--space-s-hdd878, 12px) + calc(2 * var(--font-body-m-line-height-ghizru, 20px))));
 }
-.awsui_content_1edmh_1r7fz_160.awsui_content--large_1edmh_1r7fz_172.awsui_content--without-labels_1edmh_1r7fz_163:not(#\9) {
+.awsui_content_1edmh_1ng0v_160.awsui_content--large_1edmh_1ng0v_172.awsui_content--without-labels_1edmh_1ng0v_163:not(#\9) {
   min-height: calc(2 * (140px + var(--space-s-hdd878, 12px)));
 }
 
-.awsui_status-container_1edmh_1r7fz_179:not(#\9) {
+.awsui_content--fit-height_1edmh_1ng0v_179:not(#\9) {
+  flex: 1;
+}
+
+.awsui_status-container_1edmh_1ng0v_183:not(#\9) {
   /* used in test utils */
 }
 
-.awsui_chart-container_1edmh_1r7fz_183:not(#\9) {
+.awsui_chart-container_1edmh_1ng0v_187:not(#\9) {
   display: flex;
   flex: 1;
 }
+.awsui_chart-container--fit-height_1edmh_1ng0v_191:not(#\9) {
+  height: 100%;
+  min-height: inherit;
+}
+
+.awsui_chart-container-chart-plot_1edmh_1ng0v_196:not(#\9) {
+  display: contents;
+}
+.awsui_chart-container-chart-plot--fit-height_1edmh_1ng0v_199:not(#\9) {
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
 
-.awsui_inner-content_1edmh_1r7fz_188:not(#\9) {
+.awsui_inner-content_1edmh_1ng0v_208:not(#\9) {
   display: flex;
   position: absolute;
   flex-direction: column;
@@ -199,53 +219,53 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   pointer-events: none;
 }
 
-.awsui_segment__highlight_1edmh_1r7fz_202:not(#\9) {
+.awsui_segment__highlight_1edmh_1ng0v_222:not(#\9) {
   stroke: none;
   opacity: 0;
 }
 
-.awsui_segment_1edmh_1r7fz_97:not(#\9) {
+.awsui_segment_1edmh_1ng0v_97:not(#\9) {
   stroke: var(--color-background-container-content-og3y0v, #ffffff);
   stroke-width: 2px;
   stroke-linejoin: round;
   opacity: 1;
   cursor: pointer;
 }
-.awsui_segment_1edmh_1r7fz_97:not(#\9):focus {
+.awsui_segment_1edmh_1ng0v_97:not(#\9):focus {
   outline: none;
 }
-.awsui_segment_1edmh_1r7fz_97.awsui_segment--dimmed_1edmh_1r7fz_217:not(#\9) {
+.awsui_segment_1edmh_1ng0v_97.awsui_segment--dimmed_1edmh_1ng0v_237:not(#\9) {
   opacity: 0.35;
 }
-.awsui_segment_1edmh_1r7fz_97.awsui_segment--highlighted_1edmh_1r7fz_220 > .awsui_segment__highlight_1edmh_1r7fz_202:not(#\9), .awsui_segment_1edmh_1r7fz_97:not(#\9):hover:not(.awsui_segment--dimmed_1edmh_1r7fz_217) > .awsui_segment__highlight_1edmh_1r7fz_202 {
+.awsui_segment_1edmh_1ng0v_97.awsui_segment--highlighted_1edmh_1ng0v_240 > .awsui_segment__highlight_1edmh_1ng0v_222:not(#\9), .awsui_segment_1edmh_1ng0v_97:not(#\9):hover:not(.awsui_segment--dimmed_1edmh_1ng0v_237) > .awsui_segment__highlight_1edmh_1ng0v_222 {
   opacity: 1;
 }
 
-.awsui_label_1edmh_1r7fz_138:not(#\9) {
+.awsui_label_1edmh_1ng0v_138:not(#\9) {
   color: var(--color-text-heading-default-18iw0k, #000716);
   opacity: 1;
   /* stylelint-disable-next-line selector-max-type */
   /* stylelint-disable-next-line selector-max-type */
 }
-.awsui_label_1edmh_1r7fz_138 > line:not(#\9) {
+.awsui_label_1edmh_1ng0v_138 > line:not(#\9) {
   stroke: var(--color-stroke-chart-line-7sdstd, #7d8998);
   stroke-width: var(--border-divider-section-width-orq175, 2px);
 }
-.awsui_label_1edmh_1r7fz_138 > div:not(#\9) {
+.awsui_label_1edmh_1ng0v_138 > div:not(#\9) {
   margin-top: -0.75em;
 }
-.awsui_label_1edmh_1r7fz_138.awsui_label--dimmed_1edmh_1r7fz_237:not(#\9) {
+.awsui_label_1edmh_1ng0v_138.awsui_label--dimmed_1edmh_1ng0v_257:not(#\9) {
   opacity: 0.35;
 }
-.awsui_label_1edmh_1r7fz_138.awsui_label--align-right_1edmh_1r7fz_240:not(#\9) {
+.awsui_label_1edmh_1ng0v_138.awsui_label--align-right_1edmh_1ng0v_260:not(#\9) {
   /* stylelint-disable-next-line selector-max-type */
 }
-.awsui_label_1edmh_1r7fz_138.awsui_label--align-right_1edmh_1r7fz_240 > div:not(#\9) {
+.awsui_label_1edmh_1ng0v_138.awsui_label--align-right_1edmh_1ng0v_260 > div:not(#\9) {
   text-align: right;
 }
 
 /* stylelint-disable-next-line selector-max-type */
-.awsui_label-text_1edmh_1r7fz_248 > text:not(#\9) {
+.awsui_label-text_1edmh_1ng0v_268 > text:not(#\9) {
   font-size: var(--font-body-m-size-7dign1, 14px);
   line-height: var(--font-body-m-line-height-ghizru, 20px);
   font-weight: var(--font-display-label-weight-io22e5, 700);
@@ -253,22 +273,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   dominant-baseline: middle;
 }
 
-text.awsui_label__description_1edmh_1r7fz_256:not(#\9) {
+text.awsui_label__description_1edmh_1ng0v_276:not(#\9) {
   font-size: var(--font-chart-detail-size-gtiv3j, 12px);
   font-weight: 400;
   color: var(--color-text-group-label-qtmgp9, #414d5c);
   fill: var(--color-text-group-label-qtmgp9, #414d5c);
 }
 
-.awsui_label-line_1edmh_1r7fz_263:not(#\9) {
+.awsui_label-line_1edmh_1ng0v_283:not(#\9) {
   /* used in component code */
 }
 
-.awsui_label--highlighted_1edmh_1r7fz_267:not(#\9) {
+.awsui_label--highlighted_1edmh_1ng0v_287:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_popover-header_1edmh_1r7fz_271:not(#\9) {
+.awsui_popover-header_1edmh_1ng0v_291:not(#\9) {
   display: inline-flex;
   align-items: flex-start;
 }

package/pie-chart/styles.selectors.js

@@ -2,28 +2,32 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "segment__path": "awsui_segment__path_1edmh_1r7fz_97",
-  "segment": "awsui_segment_1edmh_1r7fz_97",
-  "segment__hover": "awsui_segment__hover_1edmh_1r7fz_124",
-  "label": "awsui_label_1edmh_1r7fz_138",
-  "root": "awsui_root_1edmh_1r7fz_156",
-  "content": "awsui_content_1edmh_1r7fz_160",
-  "content--small": "awsui_content--small_1edmh_1r7fz_160",
-  "content--without-labels": "awsui_content--without-labels_1edmh_1r7fz_163",
-  "content--medium": "awsui_content--medium_1edmh_1r7fz_166",
-  "content--large": "awsui_content--large_1edmh_1r7fz_172",
-  "status-container": "awsui_status-container_1edmh_1r7fz_179",
-  "chart-container": "awsui_chart-container_1edmh_1r7fz_183",
-  "inner-content": "awsui_inner-content_1edmh_1r7fz_188",
-  "segment__highlight": "awsui_segment__highlight_1edmh_1r7fz_202",
-  "segment--dimmed": "awsui_segment--dimmed_1edmh_1r7fz_217",
-  "segment--highlighted": "awsui_segment--highlighted_1edmh_1r7fz_220",
-  "label--dimmed": "awsui_label--dimmed_1edmh_1r7fz_237",
-  "label--align-right": "awsui_label--align-right_1edmh_1r7fz_240",
-  "label-text": "awsui_label-text_1edmh_1r7fz_248",
-  "label__description": "awsui_label__description_1edmh_1r7fz_256",
-  "label-line": "awsui_label-line_1edmh_1r7fz_263",
-  "label--highlighted": "awsui_label--highlighted_1edmh_1r7fz_267",
-  "popover-header": "awsui_popover-header_1edmh_1r7fz_271"
+  "segment__path": "awsui_segment__path_1edmh_1ng0v_97",
+  "segment": "awsui_segment_1edmh_1ng0v_97",
+  "segment__hover": "awsui_segment__hover_1edmh_1ng0v_124",
+  "label": "awsui_label_1edmh_1ng0v_138",
+  "root": "awsui_root_1edmh_1ng0v_156",
+  "content": "awsui_content_1edmh_1ng0v_160",
+  "content--small": "awsui_content--small_1edmh_1ng0v_160",
+  "content--without-labels": "awsui_content--without-labels_1edmh_1ng0v_163",
+  "content--medium": "awsui_content--medium_1edmh_1ng0v_166",
+  "content--large": "awsui_content--large_1edmh_1ng0v_172",
+  "content--fit-height": "awsui_content--fit-height_1edmh_1ng0v_179",
+  "status-container": "awsui_status-container_1edmh_1ng0v_183",
+  "chart-container": "awsui_chart-container_1edmh_1ng0v_187",
+  "chart-container--fit-height": "awsui_chart-container--fit-height_1edmh_1ng0v_191",
+  "chart-container-chart-plot": "awsui_chart-container-chart-plot_1edmh_1ng0v_196",
+  "chart-container-chart-plot--fit-height": "awsui_chart-container-chart-plot--fit-height_1edmh_1ng0v_199",
+  "inner-content": "awsui_inner-content_1edmh_1ng0v_208",
+  "segment__highlight": "awsui_segment__highlight_1edmh_1ng0v_222",
+  "segment--dimmed": "awsui_segment--dimmed_1edmh_1ng0v_237",
+  "segment--highlighted": "awsui_segment--highlighted_1edmh_1ng0v_240",
+  "label--dimmed": "awsui_label--dimmed_1edmh_1ng0v_257",
+  "label--align-right": "awsui_label--align-right_1edmh_1ng0v_260",
+  "label-text": "awsui_label-text_1edmh_1ng0v_268",
+  "label__description": "awsui_label__description_1edmh_1ng0v_276",
+  "label-line": "awsui_label-line_1edmh_1ng0v_283",
+  "label--highlighted": "awsui_label--highlighted_1edmh_1ng0v_287",
+  "popover-header": "awsui_popover-header_1edmh_1ng0v_291"
 };
   

package/pie-chart/utils.d.ts

@@ -1,6 +1,6 @@
 import { ComponentFormatFunction } from '../internal/i18n/context';
 import { PieChartProps } from './interfaces';
-interface Dimension {
+export interface Dimension {
     innerRadius: number;
     outerRadius: number;
     padding: number;
@@ -10,6 +10,17 @@ interface Dimension {
 }
 export declare const dimensionsBySize: Record<NonNullable<PieChartProps['size']>, Dimension>;
 export declare const refreshDimensionsBySize: Record<NonNullable<PieChartProps['size']>, Dimension>;
+/**
+ * When `size` is a string ("small", "medium" or "large") the predefined pie chart element dimensions for classic and visual refresh are used.
+ * When `size` is a number the outer and inner radii are computed and the rest of the dimensions are taken from the closest predefined size.
+ */
+export declare function getDimensionsBySize({ size, hasLabels, visualRefresh, }: {
+    size: NonNullable<PieChartProps['size']> | number;
+    hasLabels: boolean;
+    visualRefresh?: boolean;
+}): Dimension & {
+    size: NonNullable<PieChartProps['size']>;
+};
 export declare const defaultDetails: (i18n: ComponentFormatFunction<'pie-chart'>, i18nStrings: PieChartProps.I18nStrings) => (datum: PieChartProps.Datum, dataSum: number) => ({
     key: string;
     value: number;
@@ -26,5 +37,4 @@ export declare const defaultDetails: (i18n: ComponentFormatFunction<'pie-chart'>
 export declare const balanceLabelNodes: (nodes: NodeListOf<SVGGElement>, markers: Array<{
     endY: number;
 }>, leftSide: boolean) => void;
-export {};
 //# sourceMappingURL=utils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"lib/default/","sources":["pie-chart/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAG7C,UAAU,SAAS;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,WAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,SAAS,CAsBlF,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,WAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,SAAS,CAgBzF,CAAC;AAEF,eAAO,MAAM,cAAc,SAClB,wBAAwB,WAAW,CAAC,eAAe,cAAc,WAAW,aAC3E,cAAc,KAAK,WAAW,MAAM;;;;;;IAOzC,CAAC;AAEN;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,UACrB,WAAW,WAAW,CAAC,WACrB,MAAM;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,YACtB,OAAO,SAkElB,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"lib/default/","sources":["pie-chart/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAG7C,MAAM,WAAW,SAAS;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAMD,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,WAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,SAAS,CAsBlF,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,WAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,SAAS,CAgBzF,CAAC;AAEF;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,SAAS,EACT,aAAa,GACd,EAAE;IACD,IAAI,EAAE,WAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,GAAG,MAAM,CAAC;IAClD,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,GAAG,SAAS,GAAG;IAAE,IAAI,EAAE,WAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAA;CAAE,CAuB3D;AAED,eAAO,MAAM,cAAc,SAClB,wBAAwB,WAAW,CAAC,eAAe,cAAc,WAAW,aAC3E,cAAc,KAAK,WAAW,MAAM;;;;;;IAOzC,CAAC;AAEN;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,UACrB,WAAW,WAAW,CAAC,WACrB,MAAM;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,YACtB,OAAO,SAkElB,CAAC"}

package/pie-chart/utils.js

@@ -1,25 +1,28 @@
 import styles from './styles.css.js';
+const paddingLabels = 44; // = 2 * (size-lineHeight-body-100)
+const defaultPadding = 12; // = space-s
+const smallPadding = 8; // = space-xs
 export const dimensionsBySize = {
     small: {
         innerRadius: 33,
         outerRadius: 50,
-        innerLabelPadding: 8,
-        padding: 8,
-        paddingLabels: 44, // = 2 * (size-lineHeight-body-100)
+        innerLabelPadding: smallPadding,
+        padding: smallPadding,
+        paddingLabels,
     },
     medium: {
         innerRadius: 66,
         outerRadius: 100,
-        innerLabelPadding: 12,
-        padding: 12,
-        paddingLabels: 44, // = 2 * (size-lineHeight-body-100)
+        innerLabelPadding: defaultPadding,
+        padding: defaultPadding,
+        paddingLabels,
     },
     large: {
         innerRadius: 93,
         outerRadius: 140,
-        innerLabelPadding: 12,
-        padding: 12,
-        paddingLabels: 44, // = 2 * (size-lineHeight-body-100)
+        innerLabelPadding: defaultPadding,
+        padding: defaultPadding,
+        paddingLabels,
     },
 };
 export const refreshDimensionsBySize = {
@@ -27,6 +30,31 @@ export const refreshDimensionsBySize = {
     medium: Object.assign(Object.assign({}, dimensionsBySize.medium), { innerRadius: 75, cornerRadius: 4 }),
     large: Object.assign(Object.assign({}, dimensionsBySize.large), { innerRadius: 105, cornerRadius: 5 }),
 };
+/**
+ * When `size` is a string ("small", "medium" or "large") the predefined pie chart element dimensions for classic and visual refresh are used.
+ * When `size` is a number the outer and inner radii are computed and the rest of the dimensions are taken from the closest predefined size.
+ */
+export function getDimensionsBySize({ size, hasLabels, visualRefresh, }) {
+    if (typeof size === 'string') {
+        const dimensions = visualRefresh ? refreshDimensionsBySize[size] : dimensionsBySize[size];
+        return Object.assign(Object.assign({}, dimensions), { size });
+    }
+    const sizeSpec = visualRefresh ? refreshDimensionsBySize : dimensionsBySize;
+    const getPixelSize = (d) => d.outerRadius * 2 + d.padding * 2 + (hasLabels ? d.paddingLabels : 0) * 2;
+    let matchedSize = 'small';
+    if (size > getPixelSize(sizeSpec.medium)) {
+        matchedSize = 'medium';
+    }
+    if (size > getPixelSize(sizeSpec.large)) {
+        matchedSize = 'large';
+    }
+    const padding = sizeSpec[matchedSize].padding;
+    const paddingLabels = hasLabels ? sizeSpec[matchedSize].paddingLabels : 0;
+    const radiiRatio = sizeSpec[matchedSize].outerRadius / sizeSpec[matchedSize].innerRadius;
+    const outerRadius = (size - 2 * paddingLabels - 2 * padding) / 2;
+    const innerRadius = outerRadius / radiiRatio;
+    return Object.assign(Object.assign({}, sizeSpec[matchedSize]), { outerRadius, innerRadius, size: matchedSize });
+}
 export const defaultDetails = (i18n, i18nStrings) => (datum, dataSum) => [
     { key: i18n('i18nStrings.detailsValue', i18nStrings.detailsValue) || '', value: datum.value },
     {

package/pie-chart/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"lib/default/","sources":["pie-chart/utils.ts"],"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 { ComponentFormatFunction } from '../internal/i18n/context';\nimport { PieChartProps } from './interfaces';\nimport styles from './styles.css.js';\n\ninterface Dimension {\n  innerRadius: number;\n  outerRadius: number;\n  padding: number;\n  paddingLabels: number;\n  innerLabelPadding: number;\n  cornerRadius?: number;\n}\n\nexport const dimensionsBySize: Record<NonNullable<PieChartProps['size']>, Dimension> = {\n  small: {\n    innerRadius: 33,\n    outerRadius: 50,\n    innerLabelPadding: 8,\n    padding: 8, // = space-xs\n    paddingLabels: 44, // = 2 * (size-lineHeight-body-100)\n  },\n  medium: {\n    innerRadius: 66,\n    outerRadius: 100,\n    innerLabelPadding: 12,\n    padding: 12, // = space-s\n    paddingLabels: 44, // = 2 * (size-lineHeight-body-100)\n  },\n  large: {\n    innerRadius: 93,\n    outerRadius: 140,\n    innerLabelPadding: 12,\n    padding: 12, // = space-s\n    paddingLabels: 44, // = 2 * (size-lineHeight-body-100)\n  },\n};\n\nexport const refreshDimensionsBySize: Record<NonNullable<PieChartProps['size']>, Dimension> = {\n  small: {\n    ...dimensionsBySize.small,\n    innerRadius: 38,\n    cornerRadius: 3,\n  },\n  medium: {\n    ...dimensionsBySize.medium,\n    innerRadius: 75,\n    cornerRadius: 4,\n  },\n  large: {\n    ...dimensionsBySize.large,\n    innerRadius: 105,\n    cornerRadius: 5,\n  },\n};\n\nexport const defaultDetails =\n  (i18n: ComponentFormatFunction<'pie-chart'>, i18nStrings: PieChartProps.I18nStrings) =>\n  (datum: PieChartProps.Datum, dataSum: number) =>\n    [\n      { key: i18n('i18nStrings.detailsValue', i18nStrings.detailsValue) || '', value: datum.value },\n      {\n        key: i18n('i18nStrings.detailsPercentage', i18nStrings.detailsPercentage) || '',\n        value: `${((datum.value * 100) / dataSum).toFixed(0)}%`,\n      },\n    ];\n\n/**\n * Adjusts the position of the given label nodes to avoid visual overlapping.\n * @param nodes List of label nodes of the entire chart (both left and right side)\n * @param markers Markers array that was calculated in <Labels>, but we just need the `endY` values\n * @param leftSide Boolean flag whether we are processing the left or right side of the chart labels\n */\nexport const balanceLabelNodes = (\n  nodes: NodeListOf<SVGGElement>,\n  markers: Array<{ endY: number }>,\n  leftSide: boolean\n) => {\n  const MARGIN = 10;\n\n  let previousBBox: { x: number; y: number; height: number } | null = null;\n\n  // When traversing the right side of labels, we start at the beginning of the array and go forwards.\n  // For the left side, we need to traverse backwards from the end, so that overlapping nodes are pushed down in the right order.\n  let i = leftSide ? nodes.length - 1 : 0;\n\n  while ((leftSide && i >= 0) || (!leftSide && i < nodes.length)) {\n    const node = nodes[i];\n\n    // Currently using dataset attributes to determine the base position.\n    // This implementation can be changed back to using `getBBox` when we drop IE11 support.\n    // Unfortunately, there is no good alternative for `getBBox` that is supported by IE11.\n    // `getBoundingClientRect` works for width and height calculations in SVG, but the x/y positions are inaccurate.\n    const x = parseFloat(node.getAttribute('data-x') || '0');\n    const y = parseFloat(node.getAttribute('data-y') || '0');\n    const box = {\n      x,\n      y,\n      height: node.getBoundingClientRect().height,\n    };\n\n    const marker = markers[i];\n\n    if (leftSide) {\n      i--;\n    } else {\n      i++;\n    }\n\n    if (!previousBBox) {\n      previousBBox = box;\n      node.setAttribute('transform', '');\n      continue;\n    }\n\n    if ((!leftSide && box.x < 0) || (leftSide && box.x >= 0)) {\n      // We have reached a label that is on the other side of the chart, so we're done.\n      break;\n    }\n\n    node.setAttribute('transform', '');\n\n    // Calculate how much the current node is overlapping with the previous one.\n    const offset = previousBBox.y + previousBBox.height + MARGIN - box.y;\n\n    if (offset > 0) {\n      // Move the label down.\n      node.setAttribute('transform', `translate(0 ${offset})`);\n\n      // Adjust the attached line accordingly.\n      const lineNode = node.parentNode?.querySelector(`.${styles['label-line']}`);\n      if (lineNode) {\n        const { endY } = marker;\n        lineNode.setAttribute('y2', '' + (endY + offset));\n      }\n\n      // Update the position accordingly to inform the next label\n      box.y += offset;\n    }\n\n    previousBBox = box;\n  }\n};\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"lib/default/","sources":["pie-chart/utils.ts"],"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 { ComponentFormatFunction } from '../internal/i18n/context';\nimport { PieChartProps } from './interfaces';\nimport styles from './styles.css.js';\n\nexport interface Dimension {\n  innerRadius: number;\n  outerRadius: number;\n  padding: number;\n  paddingLabels: number;\n  innerLabelPadding: number;\n  cornerRadius?: number;\n}\n\nconst paddingLabels = 44; // = 2 * (size-lineHeight-body-100)\nconst defaultPadding = 12; // = space-s\nconst smallPadding = 8; // = space-xs\n\nexport const dimensionsBySize: Record<NonNullable<PieChartProps['size']>, Dimension> = {\n  small: {\n    innerRadius: 33,\n    outerRadius: 50,\n    innerLabelPadding: smallPadding,\n    padding: smallPadding,\n    paddingLabels,\n  },\n  medium: {\n    innerRadius: 66,\n    outerRadius: 100,\n    innerLabelPadding: defaultPadding,\n    padding: defaultPadding,\n    paddingLabels,\n  },\n  large: {\n    innerRadius: 93,\n    outerRadius: 140,\n    innerLabelPadding: defaultPadding,\n    padding: defaultPadding,\n    paddingLabels,\n  },\n};\n\nexport const refreshDimensionsBySize: Record<NonNullable<PieChartProps['size']>, Dimension> = {\n  small: {\n    ...dimensionsBySize.small,\n    innerRadius: 38,\n    cornerRadius: 3,\n  },\n  medium: {\n    ...dimensionsBySize.medium,\n    innerRadius: 75,\n    cornerRadius: 4,\n  },\n  large: {\n    ...dimensionsBySize.large,\n    innerRadius: 105,\n    cornerRadius: 5,\n  },\n};\n\n/**\n * When `size` is a string (\"small\", \"medium\" or \"large\") the predefined pie chart element dimensions for classic and visual refresh are used.\n * When `size` is a number the outer and inner radii are computed and the rest of the dimensions are taken from the closest predefined size.\n */\nexport function getDimensionsBySize({\n  size,\n  hasLabels,\n  visualRefresh,\n}: {\n  size: NonNullable<PieChartProps['size']> | number;\n  hasLabels: boolean;\n  visualRefresh?: boolean;\n}): Dimension & { size: NonNullable<PieChartProps['size']> } {\n  if (typeof size === 'string') {\n    const dimensions = visualRefresh ? refreshDimensionsBySize[size] : dimensionsBySize[size];\n    return { ...dimensions, size };\n  }\n  const sizeSpec = visualRefresh ? refreshDimensionsBySize : dimensionsBySize;\n  const getPixelSize = (d: Dimension) => d.outerRadius * 2 + d.padding * 2 + (hasLabels ? d.paddingLabels : 0) * 2;\n\n  let matchedSize: NonNullable<PieChartProps['size']> = 'small';\n  if (size > getPixelSize(sizeSpec.medium)) {\n    matchedSize = 'medium';\n  }\n  if (size > getPixelSize(sizeSpec.large)) {\n    matchedSize = 'large';\n  }\n\n  const padding = sizeSpec[matchedSize].padding;\n  const paddingLabels = hasLabels ? sizeSpec[matchedSize].paddingLabels : 0;\n  const radiiRatio = sizeSpec[matchedSize].outerRadius / sizeSpec[matchedSize].innerRadius;\n  const outerRadius = (size - 2 * paddingLabels - 2 * padding) / 2;\n  const innerRadius = outerRadius / radiiRatio;\n\n  return { ...sizeSpec[matchedSize], outerRadius, innerRadius, size: matchedSize };\n}\n\nexport const defaultDetails =\n  (i18n: ComponentFormatFunction<'pie-chart'>, i18nStrings: PieChartProps.I18nStrings) =>\n  (datum: PieChartProps.Datum, dataSum: number) =>\n    [\n      { key: i18n('i18nStrings.detailsValue', i18nStrings.detailsValue) || '', value: datum.value },\n      {\n        key: i18n('i18nStrings.detailsPercentage', i18nStrings.detailsPercentage) || '',\n        value: `${((datum.value * 100) / dataSum).toFixed(0)}%`,\n      },\n    ];\n\n/**\n * Adjusts the position of the given label nodes to avoid visual overlapping.\n * @param nodes List of label nodes of the entire chart (both left and right side)\n * @param markers Markers array that was calculated in <Labels>, but we just need the `endY` values\n * @param leftSide Boolean flag whether we are processing the left or right side of the chart labels\n */\nexport const balanceLabelNodes = (\n  nodes: NodeListOf<SVGGElement>,\n  markers: Array<{ endY: number }>,\n  leftSide: boolean\n) => {\n  const MARGIN = 10;\n\n  let previousBBox: { x: number; y: number; height: number } | null = null;\n\n  // When traversing the right side of labels, we start at the beginning of the array and go forwards.\n  // For the left side, we need to traverse backwards from the end, so that overlapping nodes are pushed down in the right order.\n  let i = leftSide ? nodes.length - 1 : 0;\n\n  while ((leftSide && i >= 0) || (!leftSide && i < nodes.length)) {\n    const node = nodes[i];\n\n    // Currently using dataset attributes to determine the base position.\n    // This implementation can be changed back to using `getBBox` when we drop IE11 support.\n    // Unfortunately, there is no good alternative for `getBBox` that is supported by IE11.\n    // `getBoundingClientRect` works for width and height calculations in SVG, but the x/y positions are inaccurate.\n    const x = parseFloat(node.getAttribute('data-x') || '0');\n    const y = parseFloat(node.getAttribute('data-y') || '0');\n    const box = {\n      x,\n      y,\n      height: node.getBoundingClientRect().height,\n    };\n\n    const marker = markers[i];\n\n    if (leftSide) {\n      i--;\n    } else {\n      i++;\n    }\n\n    if (!previousBBox) {\n      previousBBox = box;\n      node.setAttribute('transform', '');\n      continue;\n    }\n\n    if ((!leftSide && box.x < 0) || (leftSide && box.x >= 0)) {\n      // We have reached a label that is on the other side of the chart, so we're done.\n      break;\n    }\n\n    node.setAttribute('transform', '');\n\n    // Calculate how much the current node is overlapping with the previous one.\n    const offset = previousBBox.y + previousBBox.height + MARGIN - box.y;\n\n    if (offset > 0) {\n      // Move the label down.\n      node.setAttribute('transform', `translate(0 ${offset})`);\n\n      // Adjust the attached line accordingly.\n      const lineNode = node.parentNode?.querySelector(`.${styles['label-line']}`);\n      if (lineNode) {\n        const { endY } = marker;\n        lineNode.setAttribute('y2', '' + (endY + offset));\n      }\n\n      // Update the position accordingly to inform the next label\n      box.y += offset;\n    }\n\n    previousBBox = box;\n  }\n};\n"]}