npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.430 → 3.0.432 - Mend

@cloudscape-design/components-themeable 3.0.430 → 3.0.432

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (47) hide show

package/lib/internal/manifest.json CHANGED Viewed

@@ -1,3 +1,3 @@
 {
-  "commit": "733845a776e6257ec6d838ecdbc6a0925ef0cf30"
+  "commit": "e443ad0810149da92b3299acd762a08b1ff1080c"
 }

package/lib/internal/scss/table/styles.scss CHANGED Viewed

@@ -68,7 +68,8 @@
   scrollbar-width: none; /* Hide scrollbar in Firefox */
   &.variant-stacked,
   &.variant-container {
-    & > .table {
+    & > .table,
+    & > .wrapper-content-measure {
       padding-left: awsui.$space-table-horizontal;
       padding-right: awsui.$space-table-horizontal;
     }

package/lib/internal/template/area-chart/chart-container.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chart-container.d.ts","sourceRoot":"lib/default/","sources":["area-chart/chart-container.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAiBrC,UAAU,mBAAmB,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,CAC9D,SAAQ,IAAI,CACV,cAAc,CAAC,CAAC,CAAC,EACf,QAAQ,GACR,QAAQ,GACR,gBAAgB,GAChB,gBAAgB,GAChB,sBAAsB,GACtB,mBAAmB,GACnB,qBAAqB,GACrB,WAAW,GACX,gBAAgB,GAChB,iBAAiB,GACjB,aAAa,CAChB;IACD,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;CACnB;;AAED,wBAA6D;AAE7D,iBAAS,cAAc,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,EAAE,EAC1D,KAAK,EACL,SAAS,EACT,MAAM,EACN,MAAM,EACN,iBAAiB,EACjB,mBAAmB,EACnB,SAAS,EACT,cAAc,EACd,eAAe,EACf,WAAW,EAAE,EACX,cAAc,EAAE,wBAAwB,EACxC,cAAc,EAAE,wBAAwB,EACxC,oBAAoB,EAAE,8BAA8B,EACpD,gBAAgB,EAChB,wBAAwB,EACxB,wBAAwB,EACxB,wBAAwB,EACxB,6BAA6B,GACzB,EACN,SAAS,EACT,SAAS,EACT,cAAyC,EACzC,cAAyC,EACzC,oBAAqD,GACtD,EAAE,mBAAmB,CAAC,CAAC,CAAC,~~eA6HxB~~"}
1	+ {"version":3,"file":"chart-container.d.ts","sourceRoot":"lib/default/","sources":["area-chart/chart-container.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAiBrC,UAAU,mBAAmB,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,CAC9D,SAAQ,IAAI,CACV,cAAc,CAAC,CAAC,CAAC,EACf,QAAQ,GACR,QAAQ,GACR,gBAAgB,GAChB,gBAAgB,GAChB,sBAAsB,GACtB,mBAAmB,GACnB,qBAAqB,GACrB,WAAW,GACX,gBAAgB,GAChB,iBAAiB,GACjB,aAAa,CAChB;IACD,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;CACnB;;AAED,wBAA6D;AAE7D,iBAAS,cAAc,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,EAAE,EAC1D,KAAK,EACL,SAAS,EACT,MAAM,EACN,MAAM,EACN,iBAAiB,EACjB,mBAAmB,EACnB,SAAS,EACT,cAAc,EACd,eAAe,EACf,WAAW,EAAE,EACX,cAAc,EAAE,wBAAwB,EACxC,cAAc,EAAE,wBAAwB,EACxC,oBAAoB,EAAE,8BAA8B,EACpD,gBAAgB,EAChB,wBAAwB,EACxB,wBAAwB,EACxB,wBAAwB,EACxB,6BAA6B,GACzB,EACN,SAAS,EACT,SAAS,EACT,cAAyC,EACzC,cAAyC,EACzC,oBAAqD,GACtD,EAAE,mBAAmB,CAAC,CAAC,CAAC,eAgIxB"}

package/lib/internal/template/area-chart/chart-container.js CHANGED Viewed

@@ -23,6 +23,7 @@ export default memo(ChartContainer);
 function ChartContainer({ model, autoWidth, xTitle, yTitle, detailPopoverSize, detailPopoverFooter, ariaLabel, ariaLabelledby, ariaDescription, i18nStrings: { xTickFormatter: deprecatedXTickFormatter, yTickFormatter: deprecatedYTickFormatter, detailTotalFormatter: deprecatedDetailTotalFormatter, detailTotalLabel, chartAriaRoleDescription, xAxisAriaRoleDescription, yAxisAriaRoleDescription, detailPopoverDismissAriaLabel, } = {}, fitHeight, minHeight, xTickFormatter = deprecatedXTickFormatter, yTickFormatter = deprecatedYTickFormatter, detailTotalFormatter = deprecatedDetailTotalFormatter, }) {
     const [leftLabelsWidth, setLeftLabelsWidth] = useState(0);
     const [containerWidth, containerWidthRef] = useContainerWidth(DEFAULT_CHART_WIDTH);
+    const maxLeftLabelsWidth = Math.round(containerWidth / 2);
     const bottomLabelsProps = useBottomLabels({
         ticks: model.computed.xTicks,
         scale: model.computed.xScale,
@@ -45,9 +46,9 @@ function ChartContainer({ model, autoWidth, xTitle, yTitle, detailPopoverSize, d
     const isPointHighlighted = model.interactions.get().highlightedPoint !== null;
     const highlightedX = useSelector(model.interactions, state => state.highlightedX);
     const detailPopoverFooterContent = useMemo(() => (detailPopoverFooter && highlightedX ? detailPopoverFooter(highlightedX[0].x) : null), [detailPopoverFooter, highlightedX]);
-    return (React.createElement(CartesianChartContainer, { ref: mergedRef, minHeight: minHeight + bottomLabelsProps.height, fitHeight: !!fitHeight, leftAxisLabel: React.createElement(AxisLabel, { axis: "y", position: "left", title: yTitle }), leftAxisLabelMeasure: React.createElement(LabelsMeasure, { scale: model.computed.yScale, ticks: model.computed.yTicks, tickFormatter: yTickFormatter, autoWidth: setLeftLabelsWidth }), bottomAxisLabel: React.createElement(AxisLabel, { axis: "x", position: "bottom", title: xTitle }), chartPlot: React.createElement(ChartPlot, { ref: model.refs.plot, width: "100%", height: fitHeight ? `calc(100% - ${bottomLabelsProps.height}px)` : model.height, offsetBottom: bottomLabelsProps.height, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescription: ariaDescription, ariaRoleDescription: chartAriaRoleDescription, activeElementKey: !(highlightDetails === null || highlightDetails === void 0 ? void 0 : highlightDetails.isPopoverPinned) && (highlightDetails === null || highlightDetails === void 0 ? void 0 : highlightDetails.activeLabel), activeElementRef: isPointHighlighted ? highlightedPointRef : model.refs.verticalMarker, activeElementFocusOffset: isPointHighlighted ? 3 : { x: 8, y: 0 }, isClickable: !(highlightDetails === null || highlightDetails === void 0 ? void 0 : highlightDetails.isPopoverPinned), onMouseMove: model.handlers.onSVGMouseMove, onMouseOut: model.handlers.onSVGMouseOut, onMouseDown: model.handlers.onSVGMouseDown, onKeyDown: model.handlers.onSVGKeyDown, onFocus: model.handlers.onSVGFocus, onBlur: model.handlers.onSVGBlur },
+    return (React.createElement(CartesianChartContainer, { ref: mergedRef, minHeight: minHeight + bottomLabelsProps.height, fitHeight: !!fitHeight, leftAxisLabel: React.createElement(AxisLabel, { axis: "y", position: "left", title: yTitle }), leftAxisLabelMeasure: React.createElement(LabelsMeasure, { scale: model.computed.yScale, ticks: model.computed.yTicks, tickFormatter: yTickFormatter, autoWidth: setLeftLabelsWidth, maxLabelsWidth: maxLeftLabelsWidth }), bottomAxisLabel: React.createElement(AxisLabel, { axis: "x", position: "bottom", title: xTitle }), chartPlot: React.createElement(ChartPlot, { ref: model.refs.plot, width: "100%", height: fitHeight ? `calc(100% - ${bottomLabelsProps.height}px)` : model.height, offsetBottom: bottomLabelsProps.height, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescription: ariaDescription, ariaRoleDescription: chartAriaRoleDescription, activeElementKey: !(highlightDetails === null || highlightDetails === void 0 ? void 0 : highlightDetails.isPopoverPinned) && (highlightDetails === null || highlightDetails === void 0 ? void 0 : highlightDetails.activeLabel), activeElementRef: isPointHighlighted ? highlightedPointRef : model.refs.verticalMarker, activeElementFocusOffset: isPointHighlighted ? 3 : { x: 8, y: 0 }, isClickable: !(highlightDetails === null || highlightDetails === void 0 ? void 0 : highlightDetails.isPopoverPinned), onMouseMove: model.handlers.onSVGMouseMove, onMouseOut: model.handlers.onSVGMouseOut, onMouseDown: model.handlers.onSVGMouseDown, onKeyDown: model.handlers.onSVGKeyDown, onFocus: model.handlers.onSVGFocus, onBlur: model.handlers.onSVGBlur },
             React.createElement("line", { ref: model.refs.plotMeasure, x1: "0", x2: "0", y1: "0", y2: "100%", stroke: "transparent", strokeWidth: 1, style: { pointerEvents: 'none' } }),
-            React.createElement(LeftLabels, { width: model.width, height: model.height, scale: model.computed.yScale, ticks: model.computed.yTicks, tickFormatter: yTickFormatter, title: yTitle, ariaRoleDescription: yAxisAriaRoleDescription }),
+            React.createElement(LeftLabels, { plotWidth: model.width, plotHeight: model.height, scale: model.computed.yScale, ticks: model.computed.yTicks, tickFormatter: yTickFormatter, title: yTitle, ariaRoleDescription: yAxisAriaRoleDescription, maxLabelsWidth: maxLeftLabelsWidth }),
             React.createElement(AreaDataSeries, { model: model }),
             React.createElement(BottomLabels, Object.assign({}, bottomLabelsProps, { width: model.width, height: model.height, scale: model.computed.xScale, title: xTitle, ariaRoleDescription: xAxisAriaRoleDescription, offsetLeft: leftLabelsWidth + BOTTOM_LABELS_OFFSET, offsetRight: BOTTOM_LABELS_OFFSET })),
             React.createElement(EmphasizedBaseline, { width: model.width, height: model.height, scale: model.computed.yScale }),

package/lib/internal/template/area-chart/chart-container.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chart-container.js","sourceRoot":"lib/default/","sources":["area-chart/chart-container.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, { useState, useEffect, memo, useRef, useMemo } from 'react';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\n\nimport ChartPlot from '../internal/components/chart-plot';\nimport AxisLabel from '../internal/components/cartesian-chart/axis-label';\nimport LabelsMeasure from '../internal/components/cartesian-chart/labels-measure';\nimport LeftLabels from '../internal/components/cartesian-chart/left-labels';\nimport BottomLabels, { useBottomLabels } from '../internal/components/cartesian-chart/bottom-labels';\nimport EmphasizedBaseline from '../internal/components/cartesian-chart/emphasized-baseline';\nimport { AreaChartProps } from './interfaces';\nimport { ChartModel } from './model';\nimport AreaDataSeries from './elements/data-series';\nimport AreaChartPopover from './elements/chart-popover';\nimport AreaHighlightedPoint from './elements/highlighted-point';\nimport AreaVerticalMarker from './elements/vertical-marker';\n\nimport useHighlightDetails from './elements/use-highlight-details';\nimport useContainerWidth from '../internal/utils/use-container-width';\nimport { useSelector } from './async-store';\nimport { CartesianChartContainer } from '../internal/components/cartesian-chart/chart-container';\n\nconst DEFAULT_CHART_WIDTH = 500;\nconst LEFT_LABELS_MARGIN = 16;\nconst BOTTOM_LABELS_OFFSET = 12;\n\ntype TickFormatter = undefined \| ((value: AreaChartProps.DataTypes) => string);\n\ninterface ChartContainerProps<T extends AreaChartProps.DataTypes>\n extends Pick<\n AreaChartProps<T>,\n \| 'xTitle'\n \| 'yTitle'\n \| 'xTickFormatter'\n \| 'yTickFormatter'\n \| 'detailTotalFormatter'\n \| 'detailPopoverSize'\n \| 'detailPopoverFooter'\n \| 'ariaLabel'\n \| 'ariaLabelledby'\n \| 'ariaDescription'\n \| 'i18nStrings'\n > {\n model: ChartModel<T>;\n autoWidth: (value: number) => void;\n fitHeight?: boolean;\n minHeight: number;\n}\n\nexport default memo(ChartContainer) as typeof ChartContainer;\n\nfunction ChartContainer<T extends AreaChartProps.DataTypes>({\n model,\n autoWidth,\n xTitle,\n yTitle,\n detailPopoverSize,\n detailPopoverFooter,\n ariaLabel,\n ariaLabelledby,\n ariaDescription,\n i18nStrings: {\n xTickFormatter: deprecatedXTickFormatter,\n yTickFormatter: deprecatedYTickFormatter,\n detailTotalFormatter: deprecatedDetailTotalFormatter,\n detailTotalLabel,\n chartAriaRoleDescription,\n xAxisAriaRoleDescription,\n yAxisAriaRoleDescription,\n detailPopoverDismissAriaLabel,\n } = {},\n fitHeight,\n minHeight,\n xTickFormatter = deprecatedXTickFormatter,\n yTickFormatter = deprecatedYTickFormatter,\n detailTotalFormatter = deprecatedDetailTotalFormatter,\n}: ChartContainerProps<T>) {\n const [leftLabelsWidth, setLeftLabelsWidth] = useState(0);\n const [containerWidth, containerWidthRef] = useContainerWidth(DEFAULT_CHART_WIDTH);\n\n const bottomLabelsProps = useBottomLabels({\n ticks: model.computed.xTicks,\n scale: model.computed.xScale,\n tickFormatter: xTickFormatter as TickFormatter,\n });\n\n // Calculate the width of the plot area and tell it to the parent.\n const plotWidth = Math.max(0, containerWidth - leftLabelsWidth - LEFT_LABELS_MARGIN);\n useEffect(() => {\n autoWidth(plotWidth);\n }, [autoWidth, plotWidth]);\n\n const highlightDetails = useHighlightDetails({\n model,\n xTickFormatter,\n yTickFormatter,\n detailTotalFormatter,\n detailTotalLabel,\n });\n\n const highlightedPointRef = useRef<SVGGElement>(null);\n\n const mergedRef = useMergeRefs(containerWidthRef, model.refs.container);\n\n const isPointHighlighted = model.interactions.get().highlightedPoint !== null;\n\n const highlightedX = useSelector(model.interactions, state => state.highlightedX);\n\n const detailPopoverFooterContent = useMemo(\n () => (detailPopoverFooter && highlightedX ? detailPopoverFooter(highlightedX[0].x) : null),\n [detailPopoverFooter, highlightedX]\n );\n\n return (\n <CartesianChartContainer\n ref={mergedRef}\n minHeight={minHeight + bottomLabelsProps.height}\n fitHeight={!!fitHeight}\n leftAxisLabel={<AxisLabel axis=\"y\" position=\"left\" title={yTitle} />}\n leftAxisLabelMeasure={\n <LabelsMeasure\n scale={model.computed.yScale}\n ticks={model.computed.yTicks}\n tickFormatter={yTickFormatter as TickFormatter}\n autoWidth={setLeftLabelsWidth}\n />\n }\n bottomAxisLabel={<AxisLabel axis=\"x\" position=\"bottom\" title={xTitle} />}\n chartPlot={\n <ChartPlot\n ref={model.refs.plot}\n width=\"100%\"\n height={fitHeight ? `calc(100% - ${bottomLabelsProps.height}px)` : model.height}\n offsetBottom={bottomLabelsProps.height}\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n ariaDescription={ariaDescription}\n ariaRoleDescription={chartAriaRoleDescription}\n activeElementKey={!highlightDetails?.isPopoverPinned && highlightDetails?.activeLabel}\n activeElementRef={isPointHighlighted ? highlightedPointRef : model.refs.verticalMarker}\n activeElementFocusOffset={isPointHighlighted ? 3 : { x: 8, y: 0 }}\n isClickable={!highlightDetails?.isPopoverPinned}\n onMouseMove={model.handlers.onSVGMouseMove}\n onMouseOut={model.handlers.onSVGMouseOut}\n onMouseDown={model.handlers.onSVGMouseDown}\n onKeyDown={model.handlers.onSVGKeyDown}\n onFocus={model.handlers.onSVGFocus}\n onBlur={model.handlers.onSVGBlur}\n >\n <line\n ref={model.refs.plotMeasure}\n x1=\"0\"\n x2=\"0\"\n y1=\"0\"\n y2=\"100%\"\n stroke=\"transparent\"\n strokeWidth={1}\n style={{ pointerEvents: 'none' }}\n />\n\n <LeftLabels\n width={model.width}\n height={model.height}\n scale={model.computed.yScale}\n ticks={model.computed.yTicks}\n tickFormatter={yTickFormatter}\n title={yTitle}\n ariaRoleDescription={yAxisAriaRoleDescription}\n />\n\n <AreaDataSeries model={model} />\n\n <BottomLabels\n {...bottomLabelsProps}\n width={model.width}\n height={model.height}\n scale={model.computed.xScale}\n title={xTitle}\n ariaRoleDescription={xAxisAriaRoleDescription}\n offsetLeft={leftLabelsWidth + BOTTOM_LABELS_OFFSET}\n offsetRight={BOTTOM_LABELS_OFFSET}\n />\n\n <EmphasizedBaseline width={model.width} height={model.height} scale={model.computed.yScale} />\n\n <AreaVerticalMarker model={model} />\n\n <AreaHighlightedPoint ref={highlightedPointRef} model={model} ariaLabel={highlightDetails?.activeLabel} />\n </ChartPlot>\n }\n popover={\n <AreaChartPopover\n model={model}\n highlightDetails={highlightDetails}\n dismissAriaLabel={detailPopoverDismissAriaLabel}\n size={detailPopoverSize}\n footer={detailPopoverFooterContent}\n />\n }\n />\n );\n}\n"]}
1	+ {"version":3,"file":"chart-container.js","sourceRoot":"lib/default/","sources":["area-chart/chart-container.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, { useState, useEffect, memo, useRef, useMemo } from 'react';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\n\nimport ChartPlot from '../internal/components/chart-plot';\nimport AxisLabel from '../internal/components/cartesian-chart/axis-label';\nimport LabelsMeasure from '../internal/components/cartesian-chart/labels-measure';\nimport LeftLabels from '../internal/components/cartesian-chart/left-labels';\nimport BottomLabels, { useBottomLabels } from '../internal/components/cartesian-chart/bottom-labels';\nimport EmphasizedBaseline from '../internal/components/cartesian-chart/emphasized-baseline';\nimport { AreaChartProps } from './interfaces';\nimport { ChartModel } from './model';\nimport AreaDataSeries from './elements/data-series';\nimport AreaChartPopover from './elements/chart-popover';\nimport AreaHighlightedPoint from './elements/highlighted-point';\nimport AreaVerticalMarker from './elements/vertical-marker';\n\nimport useHighlightDetails from './elements/use-highlight-details';\nimport useContainerWidth from '../internal/utils/use-container-width';\nimport { useSelector } from './async-store';\nimport { CartesianChartContainer } from '../internal/components/cartesian-chart/chart-container';\n\nconst DEFAULT_CHART_WIDTH = 500;\nconst LEFT_LABELS_MARGIN = 16;\nconst BOTTOM_LABELS_OFFSET = 12;\n\ntype TickFormatter = undefined \| ((value: AreaChartProps.DataTypes) => string);\n\ninterface ChartContainerProps<T extends AreaChartProps.DataTypes>\n extends Pick<\n AreaChartProps<T>,\n \| 'xTitle'\n \| 'yTitle'\n \| 'xTickFormatter'\n \| 'yTickFormatter'\n \| 'detailTotalFormatter'\n \| 'detailPopoverSize'\n \| 'detailPopoverFooter'\n \| 'ariaLabel'\n \| 'ariaLabelledby'\n \| 'ariaDescription'\n \| 'i18nStrings'\n > {\n model: ChartModel<T>;\n autoWidth: (value: number) => void;\n fitHeight?: boolean;\n minHeight: number;\n}\n\nexport default memo(ChartContainer) as typeof ChartContainer;\n\nfunction ChartContainer<T extends AreaChartProps.DataTypes>({\n model,\n autoWidth,\n xTitle,\n yTitle,\n detailPopoverSize,\n detailPopoverFooter,\n ariaLabel,\n ariaLabelledby,\n ariaDescription,\n i18nStrings: {\n xTickFormatter: deprecatedXTickFormatter,\n yTickFormatter: deprecatedYTickFormatter,\n detailTotalFormatter: deprecatedDetailTotalFormatter,\n detailTotalLabel,\n chartAriaRoleDescription,\n xAxisAriaRoleDescription,\n yAxisAriaRoleDescription,\n detailPopoverDismissAriaLabel,\n } = {},\n fitHeight,\n minHeight,\n xTickFormatter = deprecatedXTickFormatter,\n yTickFormatter = deprecatedYTickFormatter,\n detailTotalFormatter = deprecatedDetailTotalFormatter,\n}: ChartContainerProps<T>) {\n const [leftLabelsWidth, setLeftLabelsWidth] = useState(0);\n const [containerWidth, containerWidthRef] = useContainerWidth(DEFAULT_CHART_WIDTH);\n const maxLeftLabelsWidth = Math.round(containerWidth / 2);\n\n const bottomLabelsProps = useBottomLabels({\n ticks: model.computed.xTicks,\n scale: model.computed.xScale,\n tickFormatter: xTickFormatter as TickFormatter,\n });\n\n // Calculate the width of the plot area and tell it to the parent.\n const plotWidth = Math.max(0, containerWidth - leftLabelsWidth - LEFT_LABELS_MARGIN);\n useEffect(() => {\n autoWidth(plotWidth);\n }, [autoWidth, plotWidth]);\n\n const highlightDetails = useHighlightDetails({\n model,\n xTickFormatter,\n yTickFormatter,\n detailTotalFormatter,\n detailTotalLabel,\n });\n\n const highlightedPointRef = useRef<SVGGElement>(null);\n\n const mergedRef = useMergeRefs(containerWidthRef, model.refs.container);\n\n const isPointHighlighted = model.interactions.get().highlightedPoint !== null;\n\n const highlightedX = useSelector(model.interactions, state => state.highlightedX);\n\n const detailPopoverFooterContent = useMemo(\n () => (detailPopoverFooter && highlightedX ? detailPopoverFooter(highlightedX[0].x) : null),\n [detailPopoverFooter, highlightedX]\n );\n\n return (\n <CartesianChartContainer\n ref={mergedRef}\n minHeight={minHeight + bottomLabelsProps.height}\n fitHeight={!!fitHeight}\n leftAxisLabel={<AxisLabel axis=\"y\" position=\"left\" title={yTitle} />}\n leftAxisLabelMeasure={\n <LabelsMeasure\n scale={model.computed.yScale}\n ticks={model.computed.yTicks}\n tickFormatter={yTickFormatter as TickFormatter}\n autoWidth={setLeftLabelsWidth}\n maxLabelsWidth={maxLeftLabelsWidth}\n />\n }\n bottomAxisLabel={<AxisLabel axis=\"x\" position=\"bottom\" title={xTitle} />}\n chartPlot={\n <ChartPlot\n ref={model.refs.plot}\n width=\"100%\"\n height={fitHeight ? `calc(100% - ${bottomLabelsProps.height}px)` : model.height}\n offsetBottom={bottomLabelsProps.height}\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n ariaDescription={ariaDescription}\n ariaRoleDescription={chartAriaRoleDescription}\n activeElementKey={!highlightDetails?.isPopoverPinned && highlightDetails?.activeLabel}\n activeElementRef={isPointHighlighted ? highlightedPointRef : model.refs.verticalMarker}\n activeElementFocusOffset={isPointHighlighted ? 3 : { x: 8, y: 0 }}\n isClickable={!highlightDetails?.isPopoverPinned}\n onMouseMove={model.handlers.onSVGMouseMove}\n onMouseOut={model.handlers.onSVGMouseOut}\n onMouseDown={model.handlers.onSVGMouseDown}\n onKeyDown={model.handlers.onSVGKeyDown}\n onFocus={model.handlers.onSVGFocus}\n onBlur={model.handlers.onSVGBlur}\n >\n <line\n ref={model.refs.plotMeasure}\n x1=\"0\"\n x2=\"0\"\n y1=\"0\"\n y2=\"100%\"\n stroke=\"transparent\"\n strokeWidth={1}\n style={{ pointerEvents: 'none' }}\n />\n\n <LeftLabels\n plotWidth={model.width}\n plotHeight={model.height}\n scale={model.computed.yScale}\n ticks={model.computed.yTicks}\n tickFormatter={yTickFormatter}\n title={yTitle}\n ariaRoleDescription={yAxisAriaRoleDescription}\n maxLabelsWidth={maxLeftLabelsWidth}\n />\n\n <AreaDataSeries model={model} />\n\n <BottomLabels\n {...bottomLabelsProps}\n width={model.width}\n height={model.height}\n scale={model.computed.xScale}\n title={xTitle}\n ariaRoleDescription={xAxisAriaRoleDescription}\n offsetLeft={leftLabelsWidth + BOTTOM_LABELS_OFFSET}\n offsetRight={BOTTOM_LABELS_OFFSET}\n />\n\n <EmphasizedBaseline width={model.width} height={model.height} scale={model.computed.yScale} />\n\n <AreaVerticalMarker model={model} />\n\n <AreaHighlightedPoint ref={highlightedPointRef} model={model} ariaLabel={highlightDetails?.activeLabel} />\n </ChartPlot>\n }\n popover={\n <AreaChartPopover\n model={model}\n highlightDetails={highlightDetails}\n dismissAriaLabel={detailPopoverDismissAriaLabel}\n size={detailPopoverSize}\n footer={detailPopoverFooterContent}\n />\n }\n />\n );\n}\n"]}

package/lib/internal/template/internal/components/cartesian-chart/label-utils.d.ts CHANGED Viewed

@@ -12,4 +12,8 @@ export declare function formatTicks({ ticks, scale, getLabelSpace, tickFormatter
     tickFormatter?: (value: any) => string;
 }): FormattedTick[];
 export declare function getVisibleTicks(ticks: readonly FormattedTick[], from: number, until: number, balanceTicks?: boolean): readonly FormattedTick[];
+export declare function getSVGTextSize(element: null | SVGTextElement): undefined | {
+    width: number;
+    height: number;
+};
 //# sourceMappingURL=label-utils.d.ts.map

package/lib/internal/template/internal/components/cartesian-chart/label-utils.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"label-utils.d.ts","sourceRoot":"lib/default/","sources":["internal/components/cartesian-chart/label-utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAIzD,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,aAAa,EACb,aAAa,GACd,EAAE;IACD,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;IACjC,KAAK,EAAE,UAAU,GAAG,iBAAiB,CAAC;IACtC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACzC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,CAAC;CACxC,GAAG,aAAa,EAAE,CAOlB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,SAAS,aAAa,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,UAAQ,4BAGjH"}
1	+ {"version":3,"file":"label-utils.d.ts","sourceRoot":"lib/default/","sources":["internal/components/cartesian-chart/label-utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAIzD,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,aAAa,EACb,aAAa,GACd,EAAE;IACD,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;IACjC,KAAK,EAAE,UAAU,GAAG,iBAAiB,CAAC;IACtC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACzC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,CAAC;CACxC,GAAG,aAAa,EAAE,CAOlB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,SAAS,aAAa,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,UAAQ,4BAGjH;AAkDD,wBAAgB,cAAc,CAAC,OAAO,EAAE,IAAI,GAAG,cAAc,GAAG,SAAS,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAK5G"}

package/lib/internal/template/internal/components/cartesian-chart/label-utils.js CHANGED Viewed

@@ -52,4 +52,12 @@ function hasIntersection(a, b) {
     const rightEdge = right.position - right.space / 2;
     return leftEdge > rightEdge;
 }
+// Ignoring as unsupported in JSDom.
+/* istanbul ignore next */
+export function getSVGTextSize(element) {
+    if (element && element.getBBox) {
+        return element.getBBox();
+    }
+    return undefined;
+}
 //# sourceMappingURL=label-utils.js.map

package/lib/internal/template/internal/components/cartesian-chart/label-utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"label-utils.js","sourceRoot":"lib/default/","sources":["internal/components/cartesian-chart/label-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 { ChartDataTypes } from './interfaces';\nimport { ChartScale, NumericChartScale } from './scales';\n\nconst SPACE_BETWEEN = 4;\n\nexport interface FormattedTick {\n position: number;\n space: number;\n lines: string[];\n}\n\nexport function formatTicks({\n ticks,\n scale,\n getLabelSpace,\n tickFormatter,\n}: {\n ticks: readonly ChartDataTypes[];\n scale: ChartScale \| NumericChartScale;\n getLabelSpace: (label: string) => number;\n tickFormatter?: (value: any) => string;\n}): FormattedTick[] {\n return ticks.map(tick => {\n const position = scale.d3Scale(tick as any) ?? NaN;\n const label = tickFormatter ? tickFormatter(tick as any) : tick.toString();\n const lines = (label + '').split('\\n');\n return { position, lines, space: Math.max(...lines.map(getLabelSpace)) };\n });\n}\n\nexport function getVisibleTicks(ticks: readonly FormattedTick[], from: number, until: number, balanceTicks = false) {\n ticks = getTicksInRange(ticks, from, until);\n return balanceTicks ? getReducedTicks(ticks) : removeIntersections(ticks);\n}\n\nfunction getTicksInRange(ticks: readonly FormattedTick[], from: number, until: number) {\n return ticks.filter(tick => from <= tick.position - tick.space / 2 && tick.position + tick.space / 2 <= until);\n}\n\nfunction getReducedTicks(ticks: readonly FormattedTick[]): readonly FormattedTick[] {\n const reduceLabelRatio = findReduceLabelRatio(ticks);\n\n const reducedTicks = [];\n for (let index = 0; index < ticks.length; index += reduceLabelRatio) {\n reducedTicks.push(ticks[index]);\n }\n return reducedTicks;\n}\n\n// Returns a ratio such that all elements can be displayed with no intersections.\nfunction findReduceLabelRatio(ticks: readonly FormattedTick[], ratio = 1): number {\n if (ratio >= ticks.length) {\n return ratio;\n }\n for (let i = ratio; i < ticks.length; i += ratio) {\n if (hasIntersection(ticks[i - ratio], ticks[i])) {\n return findReduceLabelRatio(ticks, ratio + 1);\n }\n }\n return ratio;\n}\n\nfunction removeIntersections(ticks: readonly FormattedTick[]) {\n const visibleTicks = [];\n let prevTick = null;\n for (const tick of ticks) {\n if (!prevTick \|\| !hasIntersection(prevTick, tick)) {\n visibleTicks.push(tick);\n prevTick = tick;\n }\n }\n return visibleTicks;\n}\n\nfunction hasIntersection(a: FormattedTick, b: FormattedTick) {\n const [left, right] = a.position < b.position ? [a, b] : [b, a];\n const leftEdge = left.position + left.space / 2 + SPACE_BETWEEN;\n const rightEdge = right.position - right.space / 2;\n return leftEdge > rightEdge;\n}\n"]}
1	+ {"version":3,"file":"label-utils.js","sourceRoot":"lib/default/","sources":["internal/components/cartesian-chart/label-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 { ChartDataTypes } from './interfaces';\nimport { ChartScale, NumericChartScale } from './scales';\n\nconst SPACE_BETWEEN = 4;\n\nexport interface FormattedTick {\n position: number;\n space: number;\n lines: string[];\n}\n\nexport function formatTicks({\n ticks,\n scale,\n getLabelSpace,\n tickFormatter,\n}: {\n ticks: readonly ChartDataTypes[];\n scale: ChartScale \| NumericChartScale;\n getLabelSpace: (label: string) => number;\n tickFormatter?: (value: any) => string;\n}): FormattedTick[] {\n return ticks.map(tick => {\n const position = scale.d3Scale(tick as any) ?? NaN;\n const label = tickFormatter ? tickFormatter(tick as any) : tick.toString();\n const lines = (label + '').split('\\n');\n return { position, lines, space: Math.max(...lines.map(getLabelSpace)) };\n });\n}\n\nexport function getVisibleTicks(ticks: readonly FormattedTick[], from: number, until: number, balanceTicks = false) {\n ticks = getTicksInRange(ticks, from, until);\n return balanceTicks ? getReducedTicks(ticks) : removeIntersections(ticks);\n}\n\nfunction getTicksInRange(ticks: readonly FormattedTick[], from: number, until: number) {\n return ticks.filter(tick => from <= tick.position - tick.space / 2 && tick.position + tick.space / 2 <= until);\n}\n\nfunction getReducedTicks(ticks: readonly FormattedTick[]): readonly FormattedTick[] {\n const reduceLabelRatio = findReduceLabelRatio(ticks);\n\n const reducedTicks = [];\n for (let index = 0; index < ticks.length; index += reduceLabelRatio) {\n reducedTicks.push(ticks[index]);\n }\n return reducedTicks;\n}\n\n// Returns a ratio such that all elements can be displayed with no intersections.\nfunction findReduceLabelRatio(ticks: readonly FormattedTick[], ratio = 1): number {\n if (ratio >= ticks.length) {\n return ratio;\n }\n for (let i = ratio; i < ticks.length; i += ratio) {\n if (hasIntersection(ticks[i - ratio], ticks[i])) {\n return findReduceLabelRatio(ticks, ratio + 1);\n }\n }\n return ratio;\n}\n\nfunction removeIntersections(ticks: readonly FormattedTick[]) {\n const visibleTicks = [];\n let prevTick = null;\n for (const tick of ticks) {\n if (!prevTick \|\| !hasIntersection(prevTick, tick)) {\n visibleTicks.push(tick);\n prevTick = tick;\n }\n }\n return visibleTicks;\n}\n\nfunction hasIntersection(a: FormattedTick, b: FormattedTick) {\n const [left, right] = a.position < b.position ? [a, b] : [b, a];\n const leftEdge = left.position + left.space / 2 + SPACE_BETWEEN;\n const rightEdge = right.position - right.space / 2;\n return leftEdge > rightEdge;\n}\n\n// Ignoring as unsupported in JSDom.\n/* istanbul ignore next */\nexport function getSVGTextSize(element: null \| SVGTextElement): undefined \| { width: number; height: number } {\n if (element && element.getBBox) {\n return element.getBBox();\n }\n return undefined;\n}\n"]}

package/lib/internal/template/internal/components/cartesian-chart/labels-measure.d.ts CHANGED Viewed

@@ -6,8 +6,9 @@ interface LabelsMeasureProps {
     ticks: readonly ChartDataTypes[];
     tickFormatter?: (value: ChartDataTypes) => string;
     autoWidth: (value: number) => void;
+    maxLabelsWidth?: number;
 }
 declare const _default: typeof LabelsMeasure;
 export default _default;
-declare function LabelsMeasure({ scale, ticks, tickFormatter, autoWidth }: LabelsMeasureProps): JSX.Element;
+declare function LabelsMeasure({ scale, ticks, tickFormatter, autoWidth, maxLabelsWidth }: LabelsMeasureProps): JSX.Element;
 //# sourceMappingURL=labels-measure.d.ts.map

package/lib/internal/template/internal/components/cartesian-chart/labels-measure.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"labels-measure.d.ts","sourceRoot":"lib/default/","sources":["internal/components/cartesian-chart/labels-measure.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAGzD,OAAO,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAG1E,UAAU,kBAAkB;IAC1B,KAAK,EAAE,UAAU,GAAG,iBAAiB,CAAC;IACtC,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;IACjC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,MAAM,CAAC;IAClD,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;~~CACpC~~;;AAED,wBAA2D;AAG3D,iBAAS,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,kBAAkB,~~eA0BpF~~"}
1	+ {"version":3,"file":"labels-measure.d.ts","sourceRoot":"lib/default/","sources":["internal/components/cartesian-chart/labels-measure.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAGzD,OAAO,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAG1E,UAAU,kBAAkB;IAC1B,KAAK,EAAE,UAAU,GAAG,iBAAiB,CAAC;IACtC,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;IACjC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,MAAM,CAAC;IAClD,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;;AAED,wBAA2D;AAG3D,iBAAS,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,kBAAkB,eAqCpG"}

package/lib/internal/template/internal/components/cartesian-chart/labels-measure.js CHANGED Viewed

@@ -1,12 +1,12 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { memo, useEffect } from 'react';
+import React, { memo, useEffect, Fragment } from 'react';
 import clsx from 'clsx';
 import styles from './styles.css.js';
 import { useContainerQuery } from '@cloudscape-design/component-toolkit';
 export default memo(LabelsMeasure);
 // Places the invisible left-hand side labels to calculate their maximum width.
-function LabelsMeasure({ scale, ticks, tickFormatter, autoWidth }) {
+function LabelsMeasure({ scale, ticks, tickFormatter, autoWidth, maxLabelsWidth }) {
     const [width, ref] = useContainerQuery(rect => rect.contentBoxWidth);
     // Tell elements's width to the parent.
     useEffect(() => {
@@ -17,8 +17,10 @@ function LabelsMeasure({ scale, ticks, tickFormatter, autoWidth }) {
         if (scaledValue === undefined || !isFinite(scaledValue)) {
             return null;
         }
-        return (React.createElement("div", { key: `${value}`, className: styles['labels-left__label'], "aria-hidden": "true" }, tickFormatter ? tickFormatter(value) : value.toString()));
+        const formattedValue = tickFormatter ? tickFormatter(value) : value.toString();
+        const lines = (formattedValue + '').split('\n');
+        return (React.createElement(Fragment, { key: `${value}` }, lines.map((line, lineIndex) => (React.createElement("div", { key: lineIndex, className: styles['labels-left__label'], "aria-hidden": "true" }, line)))));
     };
-    return (React.createElement("div", { ref: ref, className: clsx(styles['labels-left'], styles['labels-left--hidden']) }, ticks.map(labelMapper)));
+    return (React.createElement("div", { ref: ref, className: clsx(styles['labels-left'], styles['labels-left--hidden']), style: { maxWidth: maxLabelsWidth } }, ticks.map(labelMapper)));
 }
 //# sourceMappingURL=labels-measure.js.map

package/lib/internal/template/internal/components/cartesian-chart/labels-measure.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"labels-measure.js","sourceRoot":"lib/default/","sources":["internal/components/cartesian-chart/labels-measure.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;~~AAC/C~~,OAAO,IAAI,MAAM,MAAM,CAAC;AAIxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;~~AASzE~~,eAAe,IAAI,CAAC,aAAa,CAAyB,CAAC;AAE3D,+EAA+E;AAC/E,SAAS,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,SAAS,EAAsB;~~IACnF~~,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,iBAAiB,CAAS,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IAE7E,uCAAuC;IACvC,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;IACxB,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;IAEvB,MAAM,WAAW,GAAG,CAAC,KAAqB,EAAE,EAAE;QAC5C,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,KAAY,CAAC,CAAC;QAChD,IAAI,WAAW,KAAK,SAAS,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;YACvD,OAAO,IAAI,CAAC;SACb;QAED,~~OAAO~~,~~CACL~~,~~6BAAK,~~GAAG,~~EAAE~~,~~GAAG~~,~~KAAK~~,~~EAAE~~,~~EAAE~~,~~SAAS~~,~~EAAE~~,~~MAAM~~,CAAC,~~oBAAoB~~,CAAC,~~iBAAc~~,MAAM,~~IAC9E~~,~~aAAa~~,CAAC,CAAC,CAAC,~~aAAa~~,CAAC,~~KAAY~~,CAAC,CAAC,CAAC,CAAC,~~KAAK~~,CAAC,~~QAAQ~~,EAAE,~~CAC3D~~,CACP,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,~~6BAAK~~,GAAG,EAAE,GAAG,~~EAAE~~,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,qBAAqB,CAAC,CAAC,~~IACjF~~,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CACnB,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo, useEffect } from 'react';\nimport clsx from 'clsx';\n\nimport { ChartScale, NumericChartScale } from './scales';\n\nimport styles from './styles.css.js';\nimport { ChartDataTypes } from '../../../mixed-line-bar-chart/interfaces';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\n\ninterface LabelsMeasureProps {\n scale: ChartScale \| NumericChartScale;\n ticks: readonly ChartDataTypes[];\n tickFormatter?: (value: ChartDataTypes) => string;\n autoWidth: (value: number) => void;\n}\n\nexport default memo(LabelsMeasure) as typeof LabelsMeasure;\n\n// Places the invisible left-hand side labels to calculate their maximum width.\nfunction LabelsMeasure({ scale, ticks, tickFormatter, autoWidth }: LabelsMeasureProps) {\n const [width, ref] = useContainerQuery<number>(rect => rect.contentBoxWidth);\n\n // Tell elements's width to the parent.\n useEffect(() => {\n autoWidth(width \|\| 0);\n }, [autoWidth, width]);\n\n const labelMapper = (value: ChartDataTypes) => {\n const scaledValue = scale.d3Scale(value as any);\n if (scaledValue === undefined \|\| !isFinite(scaledValue)) {\n return null;\n }\n\n return (\n <~~div~~ key={`${value}`} className={styles['labels-left__label']} aria-hidden=\"true\">\n ~~{tickFormatter ? tickFormatter(value as any~~) ~~: value.toString(~~)}\n </~~div~~>\n );\n };\n\n return (\n <div ref={ref} className={clsx(styles['labels-left'], styles['labels-left--hidden'])}>\n {ticks.map(labelMapper)}\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"labels-measure.js","sourceRoot":"lib/default/","sources":["internal/components/cartesian-chart/labels-measure.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,IAAI,MAAM,MAAM,CAAC;AAIxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAUzE,eAAe,IAAI,CAAC,aAAa,CAAyB,CAAC;AAE3D,+EAA+E;AAC/E,SAAS,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,cAAc,EAAsB;IACnG,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,iBAAiB,CAAS,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IAE7E,uCAAuC;IACvC,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;IACxB,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;IAEvB,MAAM,WAAW,GAAG,CAAC,KAAqB,EAAE,EAAE;QAC5C,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,KAAY,CAAC,CAAC;QAChD,IAAI,WAAW,KAAK,SAAS,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;YACvD,OAAO,IAAI,CAAC;SACb;QAED,MAAM,cAAc,GAAG,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,KAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;QACtF,MAAM,KAAK,GAAG,CAAC,cAAc,GAAG,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAEhD,OAAO,CACL,oBAAC,QAAQ,IAAC,GAAG,EAAE,GAAG,KAAK,EAAE,IACtB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,CAC9B,6BAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,oBAAoB,CAAC,iBAAc,MAAM,IAC7E,IAAI,CACD,CACP,CAAC,CACO,CACZ,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,qBAAqB,CAAC,CAAC,EACrE,KAAK,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAE,IAElC,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CACnB,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo, useEffect, Fragment } from 'react';\nimport clsx from 'clsx';\n\nimport { ChartScale, NumericChartScale } from './scales';\n\nimport styles from './styles.css.js';\nimport { ChartDataTypes } from '../../../mixed-line-bar-chart/interfaces';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\n\ninterface LabelsMeasureProps {\n scale: ChartScale \| NumericChartScale;\n ticks: readonly ChartDataTypes[];\n tickFormatter?: (value: ChartDataTypes) => string;\n autoWidth: (value: number) => void;\n maxLabelsWidth?: number;\n}\n\nexport default memo(LabelsMeasure) as typeof LabelsMeasure;\n\n// Places the invisible left-hand side labels to calculate their maximum width.\nfunction LabelsMeasure({ scale, ticks, tickFormatter, autoWidth, maxLabelsWidth }: LabelsMeasureProps) {\n const [width, ref] = useContainerQuery<number>(rect => rect.contentBoxWidth);\n\n // Tell elements's width to the parent.\n useEffect(() => {\n autoWidth(width \|\| 0);\n }, [autoWidth, width]);\n\n const labelMapper = (value: ChartDataTypes) => {\n const scaledValue = scale.d3Scale(value as any);\n if (scaledValue === undefined \|\| !isFinite(scaledValue)) {\n return null;\n }\n\n const formattedValue = tickFormatter ? tickFormatter(value as any) : value.toString();\n const lines = (formattedValue + '').split('\\n');\n\n return (\n <Fragment key={`${value}`}>\n {lines.map((line, lineIndex) => (\n <div key={lineIndex} className={styles['labels-left__label']} aria-hidden=\"true\">\n {line}\n </div>\n ))}\n </Fragment>\n );\n };\n\n return (\n <div\n ref={ref}\n className={clsx(styles['labels-left'], styles['labels-left--hidden'])}\n style={{ maxWidth: maxLabelsWidth }}\n >\n {ticks.map(labelMapper)}\n </div>\n );\n}\n"]}

package/lib/internal/template/internal/components/cartesian-chart/left-labels.d.ts CHANGED Viewed

@@ -3,8 +3,9 @@ import { ChartScale, NumericChartScale } from './scales';
 import { ChartDataTypes } from '../../../mixed-line-bar-chart/interfaces';
 interface LeftLabelsProps {
     axis?: 'x' | 'y';
-    width: number;
-    height: number;
+    plotWidth: number;
+    plotHeight: number;
+    maxLabelsWidth?: number;
     scale: ChartScale | NumericChartScale;
     ticks: readonly ChartDataTypes[];
     tickFormatter?: (value: number) => string;
@@ -13,5 +14,5 @@ interface LeftLabelsProps {
 }
 declare const _default: typeof LeftLabels;
 export default _default;
-declare function LeftLabels({ axis, width, height, scale, ticks, tickFormatter, title, ariaRoleDescription, }: LeftLabelsProps): JSX.Element;
+declare function LeftLabels({ axis, plotWidth, plotHeight, maxLabelsWidth, scale, ticks, tickFormatter, title, ariaRoleDescription, }: LeftLabelsProps): JSX.Element;
 //# sourceMappingURL=left-labels.d.ts.map

package/lib/internal/template/internal/components/cartesian-chart/left-labels.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"left-labels.d.ts","sourceRoot":"lib/default/","sources":["internal/components/cartesian-chart/left-labels.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAKzD,OAAO,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;~~AAK1E~~,UAAU,eAAe;IACvB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,~~KAAK~~,EAAE,MAAM,CAAC;~~IACd~~,MAAM,EAAE,MAAM,CAAC;~~IACf~~,KAAK,EAAE,UAAU,GAAG,iBAAiB,CAAC;IACtC,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;IACjC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;;AAED,wBAAqD;AAGrD,iBAAS,UAAU,CAAC,EAClB,IAAU,EACV,~~KAAK~~,~~EACL~~,~~MAAM~~,~~EACN~~,KAAK,EACL,KAAK,EACL,aAAa,EACb,KAAK,EACL,mBAAmB,GACpB,EAAE,eAAe,~~eAkEjB~~"}
1	+ {"version":3,"file":"left-labels.d.ts","sourceRoot":"lib/default/","sources":["internal/components/cartesian-chart/left-labels.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAKzD,OAAO,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAM1E,UAAU,eAAe;IACvB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,UAAU,GAAG,iBAAiB,CAAC;IACtC,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;IACjC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;;AAED,wBAAqD;AAGrD,iBAAS,UAAU,CAAC,EAClB,IAAU,EACV,SAAS,EACT,UAAU,EACV,cAAyC,EACzC,KAAK,EACL,KAAK,EACL,aAAa,EACb,KAAK,EACL,mBAAmB,GACpB,EAAE,eAAe,eA4EjB"}

package/lib/internal/template/internal/components/cartesian-chart/left-labels.js CHANGED Viewed

@@ -2,40 +2,50 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { memo, useRef } from 'react';
 import clsx from 'clsx';
-import { TICK_LENGTH, TICK_MARGIN } from './constants';
+import { TICK_LENGTH, TICK_LINE_HEIGHT, TICK_MARGIN } from './constants';
 import styles from './styles.css.js';
-import { formatTicks, getVisibleTicks } from './label-utils';
+import { formatTicks, getSVGTextSize, getVisibleTicks } from './label-utils';
 import { useInternalI18n } from '../../../i18n/context';
+import ResponsiveText from '../responsive-text';
 const OFFSET_PX = 12;
 export default memo(LeftLabels);
 // Renders the visible tick labels on the left axis, as well as their grid lines.
-function LeftLabels({ axis = 'y', width, height, scale, ticks, tickFormatter, title, ariaRoleDescription, }) {
+function LeftLabels({ axis = 'y', plotWidth, plotHeight, maxLabelsWidth = Number.POSITIVE_INFINITY, scale, ticks, tickFormatter, title, ariaRoleDescription, }) {
     const i18n = useInternalI18n('[charts]');
     const virtualTextRef = useRef(null);
     const yOffset = axis === 'x' && scale.isCategorical() ? Math.max(0, scale.d3Scale.bandwidth() - 1) / 2 : 0;
-    const cacheRef = useRef({});
+    const labelToBoxCache = useRef({});
     const getLabelSpace = (label) => {
-        if (cacheRef.current[label] !== undefined) {
-            return cacheRef.current[label];
+        var _a, _b, _c, _d;
+        if (labelToBoxCache.current[label] !== undefined) {
+            return (_b = (_a = labelToBoxCache.current[label]) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 0;
         }
-        if (virtualTextRef.current && virtualTextRef.current.getBBox) {
+        if (virtualTextRef.current) {
             virtualTextRef.current.textContent = label;
-            cacheRef.current[label] = virtualTextRef.current.getBBox().height;
-            return cacheRef.current[label];
         }
-        return 0;
+        labelToBoxCache.current[label] = getSVGTextSize(virtualTextRef.current);
+        return (_d = (_c = labelToBoxCache.current[label]) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 0;
     };
     const formattedTicks = formatTicks({ ticks, scale, getLabelSpace, tickFormatter });
     if (virtualTextRef.current) {
         virtualTextRef.current.textContent = '';
     }
     const from = 0 - OFFSET_PX - yOffset;
-    const until = height + OFFSET_PX - yOffset;
+    const until = plotHeight + OFFSET_PX - yOffset;
     const visibleTicks = getVisibleTicks(formattedTicks, from, until);
     return (React.createElement("g", { className: clsx(styles['labels-left']), "aria-label": title, role: "list", "aria-roledescription": i18n('i18nStrings.chartAriaRoleDescription', ariaRoleDescription), "aria-hidden": true },
         visibleTicks.map(({ position, lines }, index) => isFinite(position) && (React.createElement("g", { key: index, role: "listitem", transform: `translate(0,${position + yOffset})`, className: clsx(styles.ticks, axis === 'x' ? styles['ticks--x'] : styles['ticks--y']) },
-            axis === 'y' && (React.createElement("line", { className: clsx(styles.grid, styles.ticks_line), x1: -TICK_LENGTH, y1: 0, x2: width, y2: 0, "aria-hidden": "true" })),
-            React.createElement("text", { className: styles.ticks__text, x: -(TICK_LENGTH + TICK_MARGIN), y: 0 }, lines.join(' '))))),
+            axis === 'y' && (React.createElement("line", { className: clsx(styles.grid, styles.ticks_line), x1: -TICK_LENGTH, y1: 0, x2: plotWidth, y2: 0, "aria-hidden": "true" })),
+            lines.map((line, lineIndex) => {
+                var _a, _b;
+                const lineTextProps = {
+                    x: -(TICK_LENGTH + TICK_MARGIN),
+                    y: (lineIndex - (lines.length - 1) * 0.5) * TICK_LINE_HEIGHT,
+                    className: styles.ticks__text,
+                    children: line,
+                };
+                return ((_b = (_a = labelToBoxCache.current[lines[0]]) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0) > maxLabelsWidth ? (React.createElement(ResponsiveText, Object.assign({ key: lineIndex }, lineTextProps, { maxWidth: maxLabelsWidth }))) : (React.createElement("text", Object.assign({ key: lineIndex }, lineTextProps)));
+            })))),
         React.createElement("text", { ref: virtualTextRef, x: 0, y: 0, style: { visibility: 'hidden' }, "aria-hidden": "true" })));
 }
 //# sourceMappingURL=left-labels.js.map

package/lib/internal/template/internal/components/cartesian-chart/left-labels.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"left-labels.js","sourceRoot":"lib/default/","sources":["internal/components/cartesian-chart/left-labels.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;~~AAEvD~~,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;~~AAE7D~~,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;~~AAExD~~,MAAM,SAAS,GAAG,EAAE,CAAC;~~AAarB~~,eAAe,IAAI,CAAC,UAAU,CAAsB,CAAC;AAErD,iFAAiF;AACjF,SAAS,UAAU,CAAC,EAClB,IAAI,GAAG,GAAG,EACV,~~KAAK~~,~~EACL~~,MAAM,~~EACN~~,KAAK,EACL,KAAK,EACL,aAAa,EACb,KAAK,EACL,mBAAmB,GACH;IAChB,MAAM,IAAI,GAAG,eAAe,CAAC,UAAU,CAAC,CAAC;IACzC,MAAM,cAAc,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEpD,MAAM,OAAO,GAAG,IAAI,KAAK,GAAG,IAAI,KAAK,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAE3G,MAAM,~~QAAQ~~,GAAG,MAAM,~~CAA8B~~,EAAE,CAAC,CAAC;~~IACzD~~,MAAM,aAAa,GAAG,CAAC,KAAa,EAAE,EAAE;QACtC,IAAI,~~QAAQ~~,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,SAAS,EAAE;~~YACzC~~,OAAO,~~QAAQ~~,CAAC,OAAO,CAAC,KAAK,CAAC,~~CAAC;SAChC;QACD~~,~~IAAI~~,~~cAAc~~,CAAC,~~OAAO~~,IAAI,cAAc,CAAC,OAAO,~~CAAC,OAAO,~~EAAE;~~YAC5D~~,cAAc,CAAC,OAAO,CAAC,WAAW,GAAG,KAAK,CAAC;~~YAC3C~~,~~QAAQ~~,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,cAAc,CAAC,~~OAAO~~,CAAC,OAAO,~~EAAE,~~CAAC,~~MAAM,~~CAAC;~~YAClE~~,OAAO,~~QAAQ~~,CAAC,OAAO,CAAC,KAAK,CAAC,~~CAAC;SAChC;QACD~~,~~OAAO~~,CAAC,CAAC;~~IACX~~,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,WAAW,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC,CAAC;IAEnF,IAAI,cAAc,CAAC,OAAO,EAAE;QAC1B,cAAc,CAAC,OAAO,CAAC,WAAW,GAAG,EAAE,CAAC;KACzC;IAED,MAAM,IAAI,GAAG,CAAC,GAAG,SAAS,GAAG,OAAO,CAAC;IACrC,MAAM,KAAK,GAAG,~~MAAM~~,GAAG,SAAS,GAAG,OAAO,CAAC;~~IAC3C~~,MAAM,YAAY,GAAG,eAAe,CAAC,cAAc,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IAElE,OAAO,CACL,2BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,gBAC1B,KAAK,EACjB,IAAI,EAAC,MAAM,0BACW,IAAI,CAAC,sCAAsC,EAAE,mBAAmB,CAAC,iBAC1E,IAAI;QAEhB,YAAY,CAAC,GAAG,CACf,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,CAC7B,QAAQ,CAAC,QAAQ,CAAC,IAAI,CACpB,2BACE,GAAG,EAAE,KAAK,EACV,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,eAAe,QAAQ,GAAG,OAAO,GAAG,EAC/C,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;YAEpF,IAAI,KAAK,GAAG,IAAI,CACf,8BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,UAAU,CAAC,EAC/C,EAAE,EAAE,CAAC,WAAW,EAChB,EAAE,EAAE,CAAC,EACL,EAAE,EAAE,~~KAAK~~,~~EACT~~,EAAE,EAAE,CAAC,iBACO,MAAM,GAClB,CACH;~~YACD~~,~~8BAAM~~,SAAS,EAAE,MAAM,CAAC,WAAW,~~EAAE~~,CAAC,EAAE,CAAC,CAAC,~~WAAW~~,GAAG,~~WAAW~~,CAAC,EAAE,CAAC,EAAE,CAAC,~~IACvE~~,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,~~CACX~~,~~CACL~~,CACL,CACJ;QAED,8BAAM,GAAG,EAAE,cAAc,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,iBAAc,MAAM,GAAQ,CAChG,CACL,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { ChartScale, NumericChartScale } from './scales';\nimport { TICK_LENGTH, TICK_MARGIN } from './constants';\n\nimport styles from './styles.css.js';\nimport { formatTicks, getVisibleTicks } from './label-utils';\nimport { ChartDataTypes } from '../../../mixed-line-bar-chart/interfaces';\nimport { useInternalI18n } from '../../../i18n/context';\n\nconst OFFSET_PX = 12;\n\ninterface LeftLabelsProps {\n axis?: 'x' \| 'y';\n ~~width~~: number;\n ~~height~~: number;\n scale: ChartScale \| NumericChartScale;\n ticks: readonly ChartDataTypes[];\n tickFormatter?: (value: number) => string;\n title?: string;\n ariaRoleDescription?: string;\n}\n\nexport default memo(LeftLabels) as typeof LeftLabels;\n\n// Renders the visible tick labels on the left axis, as well as their grid lines.\nfunction LeftLabels({\n axis = 'y',\n ~~width~~,\n ~~height~~,\n scale,\n ticks,\n tickFormatter,\n title,\n ariaRoleDescription,\n}: LeftLabelsProps) {\n const i18n = useInternalI18n('[charts]');\n const virtualTextRef = useRef<SVGTextElement>(null);\n\n const yOffset = axis === 'x' && scale.isCategorical() ? Math.max(0, scale.d3Scale.bandwidth() - 1) / 2 : 0;\n\n const ~~cacheRef~~ = useRef<{ [label: string]: number }>({});\n const getLabelSpace = (label: string) => {\n if (~~cacheRef~~.current[label] !== undefined) {\n return ~~cacheRef~~.current[label];\n }\n if (virtualTextRef.current ~~&& virtualTextRef.current.getBBox~~) {\n virtualTextRef.current.textContent = label;\n ~~cacheRef~~.current[label] = virtualTextRef.current~~.getBBox(~~)~~.height~~;\n return ~~cacheRef~~.current[label]~~;\n }\n return~~ 0;\n };\n\n const formattedTicks = formatTicks({ ticks, scale, getLabelSpace, tickFormatter });\n\n if (virtualTextRef.current) {\n virtualTextRef.current.textContent = '';\n }\n\n const from = 0 - OFFSET_PX - yOffset;\n const until = ~~height~~ + OFFSET_PX - yOffset;\n const visibleTicks = getVisibleTicks(formattedTicks, from, until);\n\n return (\n <g\n className={clsx(styles['labels-left'])}\n aria-label={title}\n role=\"list\"\n aria-roledescription={i18n('i18nStrings.chartAriaRoleDescription', ariaRoleDescription)}\n aria-hidden={true}\n >\n {visibleTicks.map(\n ({ position, lines }, index) =>\n isFinite(position) && (\n <g\n key={index}\n role=\"listitem\"\n transform={`translate(0,${position + yOffset})`}\n className={clsx(styles.ticks, axis === 'x' ? styles['ticks--x'] : styles['ticks--y'])}\n >\n {axis === 'y' && (\n <line\n className={clsx(styles.grid, styles.ticks_line)}\n x1={-TICK_LENGTH}\n y1={0}\n x2={~~width~~}\n y2={0}\n aria-hidden=\"true\"\n />\n )}\n ~~<text className=~~{~~styles~~.~~ticks__text}~~ x={-(TICK_LENGTH + TICK_MARGIN)} y={0}>\n ~~{lines.join~~(' ')}\n ~~</text>\n~~ </g>\n )\n )}\n\n <text ref={virtualTextRef} x={0} y={0} style={{ visibility: 'hidden' }} aria-hidden=\"true\"></text>\n </g>\n );\n}\n"]}
1	+ {"version":3,"file":"left-labels.js","sourceRoot":"lib/default/","sources":["internal/components/cartesian-chart/left-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, { memo, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { ChartScale, NumericChartScale } from './scales';\nimport { TICK_LENGTH, TICK_LINE_HEIGHT, TICK_MARGIN } from './constants';\n\nimport styles from './styles.css.js';\nimport { formatTicks, getSVGTextSize, getVisibleTicks } from './label-utils';\nimport { ChartDataTypes } from '../../../mixed-line-bar-chart/interfaces';\nimport { useInternalI18n } from '../../../i18n/context';\nimport ResponsiveText from '../responsive-text';\n\nconst OFFSET_PX = 12;\n\ninterface LeftLabelsProps {\n axis?: 'x' \| 'y';\n plotWidth: number;\n plotHeight: number;\n maxLabelsWidth?: number;\n scale: ChartScale \| NumericChartScale;\n ticks: readonly ChartDataTypes[];\n tickFormatter?: (value: number) => string;\n title?: string;\n ariaRoleDescription?: string;\n}\n\nexport default memo(LeftLabels) as typeof LeftLabels;\n\n// Renders the visible tick labels on the left axis, as well as their grid lines.\nfunction LeftLabels({\n axis = 'y',\n plotWidth,\n plotHeight,\n maxLabelsWidth = Number.POSITIVE_INFINITY,\n scale,\n ticks,\n tickFormatter,\n title,\n ariaRoleDescription,\n}: LeftLabelsProps) {\n const i18n = useInternalI18n('[charts]');\n const virtualTextRef = useRef<SVGTextElement>(null);\n\n const yOffset = axis === 'x' && scale.isCategorical() ? Math.max(0, scale.d3Scale.bandwidth() - 1) / 2 : 0;\n\n const labelToBoxCache = useRef<{ [label: string]: undefined \| { width: number; height: number } }>({});\n const getLabelSpace = (label: string) => {\n if (labelToBoxCache.current[label] !== undefined) {\n return labelToBoxCache.current[label]?.height ?? 0;\n }\n if (virtualTextRef.current) {\n virtualTextRef.current.textContent = label;\n }\n labelToBoxCache.current[label] = getSVGTextSize(virtualTextRef.current);\n return labelToBoxCache.current[label]?.height ?? 0;\n };\n\n const formattedTicks = formatTicks({ ticks, scale, getLabelSpace, tickFormatter });\n\n if (virtualTextRef.current) {\n virtualTextRef.current.textContent = '';\n }\n\n const from = 0 - OFFSET_PX - yOffset;\n const until = plotHeight + OFFSET_PX - yOffset;\n const visibleTicks = getVisibleTicks(formattedTicks, from, until);\n\n return (\n <g\n className={clsx(styles['labels-left'])}\n aria-label={title}\n role=\"list\"\n aria-roledescription={i18n('i18nStrings.chartAriaRoleDescription', ariaRoleDescription)}\n aria-hidden={true}\n >\n {visibleTicks.map(\n ({ position, lines }, index) =>\n isFinite(position) && (\n <g\n key={index}\n role=\"listitem\"\n transform={`translate(0,${position + yOffset})`}\n className={clsx(styles.ticks, axis === 'x' ? styles['ticks--x'] : styles['ticks--y'])}\n >\n {axis === 'y' && (\n <line\n className={clsx(styles.grid, styles.ticks_line)}\n x1={-TICK_LENGTH}\n y1={0}\n x2={plotWidth}\n y2={0}\n aria-hidden=\"true\"\n />\n )}\n\n {lines.map((line, lineIndex) => {\n const lineTextProps = {\n x: -(TICK_LENGTH + TICK_MARGIN),\n y: (lineIndex - (lines.length - 1) * 0.5) * TICK_LINE_HEIGHT,\n className: styles.ticks__text,\n children: line,\n };\n return (labelToBoxCache.current[lines[0]]?.width ?? 0) > maxLabelsWidth ? (\n <ResponsiveText key={lineIndex} {...lineTextProps} maxWidth={maxLabelsWidth} />\n ) : (\n <text key={lineIndex} {...lineTextProps} />\n );\n })}\n </g>\n )\n )}\n\n <text ref={virtualTextRef} x={0} y={0} style={{ visibility: 'hidden' }} aria-hidden=\"true\"></text>\n </g>\n );\n}\n"]}

package/lib/internal/template/internal/components/responsive-text/index.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import React from 'react';
+interface ResponsiveTextProps {
+    x: number;
+    y: number;
+    className?: string;
+    children: string;
+    maxWidth: number;
+}
+declare const _default: React.MemoExoticComponent<typeof ResponsiveText>;
+export default _default;
+declare function ResponsiveText({ x, y, className, children, maxWidth }: ResponsiveTextProps): JSX.Element;
+export declare function renderTextContent(textNode: SVGTextElement, text: string, maxWidth: number): void;
+//# sourceMappingURL=index.d.ts.map

package/lib/internal/template/internal/components/responsive-text/index.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/components/responsive-text/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAGvD,UAAU,mBAAmB;IAC3B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB;;AAED,wBAAoC;AAEpC,iBAAS,cAAc,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,mBAAmB,eAanF;AAED,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,QAWzF"}

package/lib/internal/template/internal/components/responsive-text/index.js ADDED Viewed

@@ -0,0 +1,32 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { memo, useEffect, useRef } from 'react';
+import { getTextWidth } from './responsive-text-utils';
+export default memo(ResponsiveText);
+function ResponsiveText({ x, y, className, children, maxWidth }) {
+    const textRef = useRef(null);
+    // Determine the visible width of the text and if necessary truncate it until it fits.
+    useEffect(() => {
+        renderTextContent(textRef.current, children, maxWidth);
+    }, [maxWidth, children]);
+    return (React.createElement("text", { ref: textRef, x: x, y: y, style: { textAnchor: 'end' }, className: className }, children));
+}
+export function renderTextContent(textNode, text, maxWidth) {
+    let visibleLength = text.length;
+    while (visibleLength >= 0) {
+        textNode.textContent = truncateText(text, visibleLength);
+        if (getTextWidth(textNode) <= maxWidth) {
+            return;
+        }
+        else {
+            visibleLength--;
+        }
+    }
+}
+function truncateText(text, maxLength) {
+    if (text.length === maxLength) {
+        return text;
+    }
+    return text.slice(0, maxLength) + '…';
+}
+//# sourceMappingURL=index.js.map

package/lib/internal/template/internal/components/responsive-text/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/responsive-text/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAUvD,eAAe,IAAI,CAAC,cAAc,CAAC,CAAC;AAEpC,SAAS,cAAc,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAuB;IAClF,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE7C,sFAAsF;IACtF,SAAS,CAAC,GAAG,EAAE;QACb,iBAAiB,CAAC,OAAO,CAAC,OAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC1D,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEzB,OAAO,CACL,8BAAM,GAAG,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,IAC/E,QAAQ,CACJ,CACR,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,QAAwB,EAAE,IAAY,EAAE,QAAgB;IACxF,IAAI,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;IAChC,OAAO,aAAa,IAAI,CAAC,EAAE;QACzB,QAAQ,CAAC,WAAW,GAAG,YAAY,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC;QAEzD,IAAI,YAAY,CAAC,QAAQ,CAAC,IAAI,QAAQ,EAAE;YACtC,OAAO;SACR;aAAM;YACL,aAAa,EAAE,CAAC;SACjB;KACF;AACH,CAAC;AAED,SAAS,YAAY,CAAC,IAAY,EAAE,SAAiB;IACnD,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,EAAE;QAC7B,OAAO,IAAI,CAAC;KACb;IACD,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,SAAS,CAAC,GAAG,GAAG,CAAC;AACxC,CAAC","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';\nimport { getTextWidth } from './responsive-text-utils';\n\ninterface ResponsiveTextProps {\n x: number;\n y: number;\n className?: string;\n children: string;\n maxWidth: number;\n}\n\nexport default memo(ResponsiveText);\n\nfunction ResponsiveText({ x, y, className, children, maxWidth }: ResponsiveTextProps) {\n const textRef = useRef<SVGTextElement>(null);\n\n // Determine the visible width of the text and if necessary truncate it until it fits.\n useEffect(() => {\n renderTextContent(textRef.current!, children, maxWidth);\n }, [maxWidth, children]);\n\n return (\n <text ref={textRef} x={x} y={y} style={{ textAnchor: 'end' }} className={className}>\n {children}\n </text>\n );\n}\n\nexport function renderTextContent(textNode: SVGTextElement, text: string, maxWidth: number) {\n let visibleLength = text.length;\n while (visibleLength >= 0) {\n textNode.textContent = truncateText(text, visibleLength);\n\n if (getTextWidth(textNode) <= maxWidth) {\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/lib/internal/template/internal/components/responsive-text/responsive-text-utils.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export declare function getTextWidth(textNode: SVGTextElement): number;
2	+ //# sourceMappingURL=responsive-text-utils.d.ts.map

package/lib/internal/template/internal/components/responsive-text/responsive-text-utils.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"responsive-text-utils.d.ts","sourceRoot":"lib/default/","sources":["internal/components/responsive-text/responsive-text-utils.ts"],"names":[],"mappings":"AAKA,wBAAgB,YAAY,CAAC,QAAQ,EAAE,cAAc,UAKpD"}

package/lib/internal/template/internal/components/responsive-text/responsive-text-utils.js ADDED Viewed

@@ -0,0 +1,11 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+// Ignoring as unsupported in JSDom.
+/* istanbul ignore next */
+export function getTextWidth(textNode) {
+    if (textNode.getComputedTextLength) {
+        return textNode.getComputedTextLength();
+    }
+    return -1;
+}
+//# sourceMappingURL=responsive-text-utils.js.map

package/lib/internal/template/internal/components/responsive-text/responsive-text-utils.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"responsive-text-utils.js","sourceRoot":"lib/default/","sources":["internal/components/responsive-text/responsive-text-utils.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,oCAAoC;AACpC,0BAA0B;AAC1B,MAAM,UAAU,YAAY,CAAC,QAAwB;IACnD,IAAI,QAAQ,CAAC,qBAAqB,EAAE;QAClC,OAAO,QAAQ,CAAC,qBAAqB,EAAE,CAAC;KACzC;IACD,OAAO,CAAC,CAAC,CAAC;AACZ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n// Ignoring as unsupported in JSDom.\n/* istanbul ignore next */\nexport function getTextWidth(textNode: SVGTextElement) {\n if (textNode.getComputedTextLength) {\n return textNode.getComputedTextLength();\n }\n return -1;\n}\n"]}

package/lib/internal/template/internal/environment.js CHANGED Viewed

@@ -1,4 +1,4 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (733845a7)";
+export var PACKAGE_VERSION = "3.0.0 (e443ad08)";
 export var THEME = "open-source-visual-refresh";
 export var ALWAYS_VISUAL_REFRESH = true;

package/lib/internal/template/internal/environment.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (733845a7)",
+  "PACKAGE_VERSION": "3.0.0 (e443ad08)",
   "THEME": "default",
   "ALWAYS_VISUAL_REFRESH": false
 }

package/lib/internal/template/mixed-line-bar-chart/chart-container.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chart-container.d.ts","sourceRoot":"lib/default/","sources":["mixed-line-bar-chart/chart-container.tsx"],"names":[],"mappings":"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~~eA+fxB~~"}
1	+ {"version":3,"file":"chart-container.d.ts","sourceRoot":"lib/default/","sources":["mixed-line-bar-chart/chart-container.tsx"],"names":[],"mappings":"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"}

package/lib/internal/template/mixed-line-bar-chart/chart-container.js CHANGED Viewed

@@ -40,6 +40,7 @@ export default function ChartContainer(_a) {
     const [leftLabelsWidth, setLeftLabelsWidth] = useState(0);
     const [verticalMarkerX, setVerticalMarkerX] = useState(null);
     const [containerWidth, containerMeasureRef] = useContainerWidth(500);
+    const maxLeftLabelsWidth = Math.round(containerWidth / 2);
     const plotWidth = containerWidth ? containerWidth - leftLabelsWidth - LEFT_LABELS_MARGIN : 500;
     const containerRefObject = useRef(null);
     const containerRef = useMergeRefs(containerMeasureRef, containerRefObject);
@@ -325,10 +326,10 @@ export default function ChartContainer(_a) {
     const activeLiveRegion = activeAriaLabel && !highlightedPoint && highlightedGroupIndex === null ? activeAriaLabel : '';
     const isLineXKeyboardFocused = isPlotFocused && !highlightedPoint && verticalMarkerX;
     const isRefresh = useVisualRefresh();
-    return (React.createElement(CartesianChartContainer, { ref: containerRef, minHeight: explicitPlotHeight + bottomLabelsProps.height, fitHeight: !!fitHeight, leftAxisLabel: React.createElement(AxisLabel, { axis: y, position: "left", title: leftAxisProps.title }), leftAxisLabelMeasure: React.createElement(LabelsMeasure, { ticks: leftAxisProps.ticks, scale: leftAxisProps.scale, tickFormatter: leftAxisProps.tickFormatter, autoWidth: setLeftLabelsWidth }), bottomAxisLabel: React.createElement(AxisLabel, { axis: x, position: "bottom", title: bottomAxisProps.title }), chartPlot: React.createElement(ChartPlot, { ref: plotRef, width: "100%", height: fitHeight ? `calc(100% - ${bottomLabelsProps.height}px)` : plotHeight, offsetBottom: bottomLabelsProps.height, isClickable: isPopoverOpen && !isPopoverPinned, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescription: ariaDescription, ariaRoleDescription: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.chartAriaRoleDescription, ariaLiveRegion: activeLiveRegion, activeElementRef: highlightedElementRef, activeElementKey: isPlotFocused &&
+    return (React.createElement(CartesianChartContainer, { ref: containerRef, minHeight: explicitPlotHeight + bottomLabelsProps.height, fitHeight: !!fitHeight, leftAxisLabel: React.createElement(AxisLabel, { axis: y, position: "left", title: leftAxisProps.title }), leftAxisLabelMeasure: React.createElement(LabelsMeasure, { ticks: leftAxisProps.ticks, scale: leftAxisProps.scale, tickFormatter: leftAxisProps.tickFormatter, autoWidth: setLeftLabelsWidth, maxLabelsWidth: maxLeftLabelsWidth }), bottomAxisLabel: React.createElement(AxisLabel, { axis: x, position: "bottom", title: bottomAxisProps.title }), chartPlot: React.createElement(ChartPlot, { ref: plotRef, width: "100%", height: fitHeight ? `calc(100% - ${bottomLabelsProps.height}px)` : plotHeight, offsetBottom: bottomLabelsProps.height, isClickable: isPopoverOpen && !isPopoverPinned, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescription: ariaDescription, ariaRoleDescription: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.chartAriaRoleDescription, ariaLiveRegion: activeLiveRegion, activeElementRef: highlightedElementRef, activeElementKey: isPlotFocused &&
                 ((_c = highlightedGroupIndex === null || highlightedGroupIndex === void 0 ? void 0 : highlightedGroupIndex.toString()) !== null && _c !== void 0 ? _c : (isLineXKeyboardFocused ? `point-index-${handlers.xIndex}` : point === null || point === void 0 ? void 0 : point.key)), activeElementFocusOffset: isGroupNavigation ? 0 : isLineXKeyboardFocused ? { x: 8, y: 0 } : 3, onMouseMove: onSVGMouseMove, onMouseOut: onSVGMouseOut, onMouseDown: onSVGMouseDown, onFocus: onSVGFocus, onBlur: onSVGBlur, onKeyDown: onSVGKeyDown },
             React.createElement("line", { ref: plotMeasureRef, x1: "0", x2: "0", y1: "0", y2: "100%", stroke: "transparent", strokeWidth: 1, style: { pointerEvents: 'none' } }),
-            React.createElement(LeftLabels, { axis: y, ticks: leftAxisProps.ticks, scale: leftAxisProps.scale, tickFormatter: leftAxisProps.tickFormatter, title: leftAxisProps.title, ariaRoleDescription: leftAxisProps.ariaRoleDescription, width: plotWidth, height: plotHeight }),
+            React.createElement(LeftLabels, { axis: y, ticks: leftAxisProps.ticks, scale: leftAxisProps.scale, tickFormatter: leftAxisProps.tickFormatter, title: leftAxisProps.title, ariaRoleDescription: leftAxisProps.ariaRoleDescription, maxLabelsWidth: maxLeftLabelsWidth, plotWidth: plotWidth, plotHeight: plotHeight }),
             horizontalBars && (React.createElement(VerticalGridLines, { scale: yAxisProps.scale, ticks: yAxisProps.ticks, height: plotHeight })),
             emphasizeBaselineAxis && linesOnly && (React.createElement(EmphasizedBaseline, { axis: x, scale: yAxisProps.scale, width: plotWidth, height: plotHeight })),
             React.createElement(DataSeries, { axis: x, plotWidth: plotWidth, plotHeight: plotHeight, highlightedSeries: highlightedSeries !== null && highlightedSeries !== void 0 ? highlightedSeries : null, highlightedGroupIndex: highlightedGroupIndex, stackedBars: stackedBars, isGroupNavigation: isGroupNavigation, visibleSeries: visibleSeries, xScale: xAxisProps.scale, yScale: yAxisProps.scale }),