- {(defaultFilter || additionalFilters) && (
-
-
- {defaultFilter}
- {additionalFilters}
-
-
- )}
+
+ {(defaultFilter || additionalFilters) && (
+
+
+ {defaultFilter}
+ {additionalFilters}
+
+
+ )}
-
- {chartStatus}
- {chart}
-
-
- {legend &&
{legend}}
+
+ {chartStatus}
+ {chart}
+
+ {legend &&
{legend}}
);
}
diff --git a/src/internal/components/chart-wrapper/styles.scss b/src/internal/components/chart-wrapper/styles.scss
index caef6ad956..6419763a63 100644
--- a/src/internal/components/chart-wrapper/styles.scss
+++ b/src/internal/components/chart-wrapper/styles.scss
@@ -10,21 +10,6 @@
@include styles.styles-reset;
position: relative;
display: block;
-
- &--fit-height {
- height: 100%;
- overflow-y: auto;
- }
-}
-
-.inner-wrapper {
- display: contents;
-
- &--fit-height {
- display: flex;
- flex-direction: column;
- height: 100%;
- }
}
.has-default-filter {
@@ -48,10 +33,6 @@
margin-bottom: calc(2 * #{awsui.$font-body-m-line-height});
}
-.content--fit-height {
- flex: 1;
-}
-
.filter-container {
/* used in test-utils */
}
diff --git a/src/mixed-line-bar-chart/__tests__/mixed-chart.test.tsx b/src/mixed-line-bar-chart/__tests__/mixed-chart.test.tsx
index 160bf23991..59706baf5f 100644
--- a/src/mixed-line-bar-chart/__tests__/mixed-chart.test.tsx
+++ b/src/mixed-line-bar-chart/__tests__/mixed-chart.test.tsx
@@ -811,20 +811,11 @@ describe('Reserve space', () => {
const reserveFilterClass = chartWrapperStyles['content--reserve-filter'];
const reserveLegendClass = chartWrapperStyles['content--reserve-legend'];
- test('by applying the correct minimum height when fitHeight=false', () => {
- const { wrapper } = renderMixedChart(
);
+ test('by applying the correct minimum height', () => {
+ const { wrapper } = renderMixedChart(
);
expect(wrapper.findByClassName(chartWrapperStyles.content)?.getElement()).toHaveStyle({ minHeight: '100px' });
});
- test.each([false, true])('when fitHeight=%s plot min-height is explicitly set', fitHeight => {
- const { wrapper } = renderMixedChart(
-
- );
- const chartElement = wrapper.findByClassName(cartesianStyles['chart-container-plot-wrapper'])!.getElement();
- expect(chartElement.style.minHeight).toBeDefined();
- expect(parseInt(chartElement.style.minHeight)).toBeGreaterThanOrEqual(100);
- });
-
test('unless there is a chart showing', () => {
const { wrapper } = renderMixedChart(
);
diff --git a/src/mixed-line-bar-chart/chart-container.tsx b/src/mixed-line-bar-chart/chart-container.tsx
index 5f6ddfb760..90992f7760 100644
--- a/src/mixed-line-bar-chart/chart-container.tsx
+++ b/src/mixed-line-bar-chart/chart-container.tsx
@@ -33,7 +33,6 @@ import useContainerWidth from '../internal/utils/use-container-width';
import { useMergeRefs } from '../internal/hooks/use-merge-refs';
import { nodeBelongs } from '../internal/utils/node-belongs';
import { CartesianChartContainer } from '../internal/components/cartesian-chart/chart-container';
-import { useResizeObserver } from '../internal/hooks/container-queries';
const LEFT_LABELS_MARGIN = 16;
const BOTTOM_LABELS_OFFSET = 12;
@@ -44,7 +43,6 @@ export interface ChartContainerProps
{
series: ReadonlyArray>;
visibleSeries: ReadonlyArray>;
- fitHeight?: boolean;
height: number;
detailPopoverSize: MixedLineBarChartProps['detailPopoverSize'];
detailPopoverFooter: MixedLineBarChartProps['detailPopoverFooter'];
@@ -81,8 +79,7 @@ export interface ChartContainerProps {
}
export default function ChartContainer({
- fitHeight,
- height: explicitPlotHeight,
+ height: plotHeight,
series,
visibleSeries,
highlightedSeries,
@@ -121,14 +118,6 @@ export default function ChartContainer({
const containerRef = useMergeRefs(containerMeasureRef, containerRefObject);
const popoverRef = useRef(null);
- const plotMeasureRef = useRef(null);
- const [measuredHeight, setHeight] = useState(0);
- useResizeObserver(
- () => plotMeasureRef.current,
- entry => fitHeight && setHeight(entry.borderBoxHeight)
- );
- const plotHeight = fitHeight ? measuredHeight : explicitPlotHeight;
-
const isRefresh = useVisualRefresh();
const linesOnly = series.every(({ series }) => series.type === 'line' || series.type === 'threshold');
@@ -456,8 +445,6 @@ export default function ChartContainer({
return (
}
leftAxisLabelMeasure={
({
chartPlot={
({
onBlur={onSVGBlur}
onKeyDown={onSVGKeyDown}
>
-
-
= SomeRequired<
InternalBaseComponentProps;
export default function InternalMixedLineBarChart({
- fitHeight,
height,
xScaleType,
yScaleType,
@@ -218,7 +217,6 @@ export default function InternalMixedLineBarChart {
});
});
});
-
-describe.each([false, true])('getDimensionsBySize visualRefresh=%s', visualRefresh => {
- const d = visualRefresh ? refreshDimensionsBySize : dimensionsBySize;
-
- test.each(['small', 'medium', 'large'] as const)('get correct dimensions for size="%s"', size => {
- const dimensions = getDimensionsBySize({ size, hasLabels: true, visualRefresh });
- expect(dimensions).toEqual({ ...d[size], size });
- });
-
- test.each([
- [d.medium.outerRadius * 2 + d.medium.padding * 2 - 1, 'small'],
- [d.large.outerRadius * 2 + d.large.padding * 2 - 1, 'medium'],
- [d.large.outerRadius * 2 + d.large.padding * 2 + 1, 'large'],
- ])('matches size correctly for height=$0 and hasLabels=false', (height, matchedSize) => {
- const dimensions = getDimensionsBySize({ size: height, hasLabels: false, visualRefresh });
- expect(dimensions.size).toBe(matchedSize);
- });
-
- test.each([
- [d.medium.outerRadius * 2 + d.medium.padding * 2 + d.medium.paddingLabels * 2 - 1, 'small'],
- [d.large.outerRadius * 2 + d.large.padding * 2 + d.large.paddingLabels * 2 - 1, 'medium'],
- [d.large.outerRadius * 2 + d.large.padding * 2 + d.large.paddingLabels * 2 + 1, 'large'],
- ])('matches size correctly for height=$0 and hasLabels=true', (height, matchedSize) => {
- const dimensions = getDimensionsBySize({ size: height, hasLabels: true, visualRefresh });
- expect(dimensions.size).toBe(matchedSize);
- });
-});
diff --git a/src/pie-chart/index.tsx b/src/pie-chart/index.tsx
index aa9762b0f4..3994cbe56e 100644
--- a/src/pie-chart/index.tsx
+++ b/src/pie-chart/index.tsx
@@ -21,13 +21,10 @@ import useContainerWidth from '../internal/utils/use-container-width';
import { nodeBelongs } from '../internal/utils/node-belongs';
import { ChartWrapper } from '../internal/components/chart-wrapper';
import ChartStatusContainer, { getChartStatus } from '../internal/components/chart-status-container';
-import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
-import { getDimensionsBySize } from './utils';
export { PieChartProps };
const PieChart = function PieChart({
- fitHeight,
variant = 'pie',
size = 'medium',
hideTitles = false,
@@ -154,20 +151,13 @@ const PieChart = function PieChart {
pieData: PieArcDatum>[];
visibleDataSum: number;
- dimensions: Dimension;
+ size: NonNullable;
hideTitles: boolean;
hideDescriptions: boolean;
highlightedSegment: PieChartProps.Datum | null;
@@ -69,7 +69,7 @@ function LabelElement({
export default ({
pieData,
- dimensions,
+ size,
highlightedSegment,
segmentDescription,
visibleDataSum,
@@ -80,7 +80,7 @@ export default ({
const containerBoundaries = useElementBoundaries(containerRef);
const markers = useMemo(() => {
- const { outerRadius: radius, innerLabelPadding } = dimensions;
+ const { outerRadius: radius, innerLabelPadding } = dimensionsBySize[size];
// More arc factories for the label positioning
const arcMarkerStart = arc>()
@@ -118,7 +118,7 @@ export default ({
datum,
};
});
- }, [pieData, dimensions]);
+ }, [pieData, size]);
const rootRef = useRef(null);
diff --git a/src/pie-chart/pie-chart.tsx b/src/pie-chart/pie-chart.tsx
index e515537f5c..da9197d353 100644
--- a/src/pie-chart/pie-chart.tsx
+++ b/src/pie-chart/pie-chart.tsx
@@ -13,15 +13,13 @@ import InternalBox from '../box/internal';
import Labels from './labels';
import { PieChartProps, SeriesInfo } from './interfaces';
import styles from './styles.css.js';
-import { defaultDetails, getDimensionsBySize } from './utils';
+import { defaultDetails, dimensionsBySize, refreshDimensionsBySize } from './utils';
import Segments from './segments';
+import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
import ChartPlot, { ChartPlotRef } from '../internal/components/chart-plot';
import { SomeRequired } from '../internal/types';
import { useInternalI18n } from '../internal/i18n/context';
import { nodeBelongs } from '../internal/utils/node-belongs';
-import clsx from 'clsx';
-import { useResizeObserver } from '../internal/hooks/container-queries';
-import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
export interface InternalChartDatum {
index: number;
@@ -35,7 +33,6 @@ interface InternalPieChartProps
'variant' | 'size' | 'i18nStrings' | 'hideTitles' | 'hideDescriptions'
> {
width: number;
- height: number;
highlightedSegment: T | null;
onHighlightChange: (segment: null | T) => void;
@@ -56,11 +53,8 @@ export interface TooltipData {
}
export default ({
- fitHeight,
- height: explicitHeight,
variant,
size,
- width,
i18nStrings,
ariaLabel,
ariaLabelledby,
@@ -72,6 +66,7 @@ export default ({
detailPopoverContent,
detailPopoverSize,
detailPopoverFooter,
+ width,
segmentDescription,
highlightedSegment,
onHighlightChange,
@@ -86,26 +81,16 @@ export default ({
const focusedSegmentRef = useRef(null);
const popoverTrackRef = useRef(null);
const popoverRef = useRef(null);
-
- const hasLabels = !(hideTitles && hideDescriptions);
const isRefresh = useVisualRefresh();
- const [measuredHeight, setHeight] = useState(0);
- useResizeObserver(
- () => plotRef.current?.svg ?? null,
- entry => fitHeight && setHeight(entry.borderBoxHeight)
- );
- const height = fitHeight ? measuredHeight : explicitHeight;
+ const dimensions = isRefresh ? refreshDimensionsBySize[size] : dimensionsBySize[size];
+ const radius = dimensions.outerRadius;
- const dimensions = useMemo(
- () =>
- getDimensionsBySize({ size: fitHeight ? Math.min(height, width) : size, hasLabels, visualRefresh: isRefresh }),
- [fitHeight, height, width, size, hasLabels, isRefresh]
- );
+ const hasLabels = !(hideTitles && hideDescriptions);
+ const height = 2 * (radius + dimensions.padding + (hasLabels ? dimensions.paddingLabels : 0));
// Inner content is only available for donut charts and the inner description is not displayed for small charts
- const hasInnerContent =
- variant === 'donut' && (innerMetricValue || (innerMetricDescription && dimensions.size !== 'small'));
+ const hasInnerContent = variant === 'donut' && (innerMetricValue || (innerMetricDescription && size !== 'small'));
const innerMetricId = useUniqueId('awsui-pie-chart__inner');
@@ -296,76 +281,60 @@ export default ({
};
return (
-
-
+
-
-
+ {hasLabels && (
+
- {hasLabels && (
-
- )}
-
-
-
+ )}
+
{hasInnerContent && (
{innerMetricValue && (
-
+
{innerMetricValue}
)}
- {innerMetricDescription && dimensions.size !== 'small' && (
+ {innerMetricDescription && size !== 'small' && (
{innerMetricDescription}
diff --git a/src/pie-chart/segments.tsx b/src/pie-chart/segments.tsx
index 131f67bbdb..82a0d8453a 100644
--- a/src/pie-chart/segments.tsx
+++ b/src/pie-chart/segments.tsx
@@ -4,8 +4,9 @@ import React, { useMemo } from 'react';
import { arc, PieArcDatum } from 'd3-shape';
import { PieChartProps } from './interfaces';
-import { Dimension } from './utils';
+import { dimensionsBySize, refreshDimensionsBySize } from './utils';
import { InternalChartDatum } from './pie-chart';
+import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
import styles from './styles.css.js';
import clsx from 'clsx';
import { useInternalI18n } from '../internal/i18n/context';
@@ -13,11 +14,12 @@ import { useInternalI18n } from '../internal/i18n/context';
interface SegmentsProps {
pieData: Array>>;
highlightedSegment: T | null;
- dimensions: Dimension;
+ size: NonNullable;
variant: PieChartProps['variant'];
focusedSegmentRef: React.RefObject;
popoverTrackRef: React.RefObject;
segmentAriaRoleDescription?: string;
+
onMouseDown: (datum: InternalChartDatum) => void;
onMouseOver: (datum: InternalChartDatum) => void;
onMouseOut: (event: React.MouseEvent) => void;
@@ -26,7 +28,7 @@ interface SegmentsProps {
export default function Segments({
pieData,
highlightedSegment,
- dimensions,
+ size,
variant,
focusedSegmentRef,
popoverTrackRef,
@@ -36,8 +38,10 @@ export default function Segments({
onMouseOut,
}: SegmentsProps) {
const i18n = useInternalI18n('pie-chart');
+ const isRefresh = useVisualRefresh();
const { arcFactory, highlightedArcFactory } = useMemo(() => {
+ const dimensions = isRefresh ? refreshDimensionsBySize[size] : dimensionsBySize[size];
const radius = dimensions.outerRadius;
const innerRadius = variant === 'pie' ? 0 : dimensions.innerRadius;
const cornerRadius = dimensions.cornerRadius || 0;
@@ -55,7 +59,7 @@ export default function Segments({
arcFactory,
highlightedArcFactory,
};
- }, [dimensions, variant]);
+ }, [size, variant, isRefresh]);
const centroid = useMemo(() => {
for (const datum of pieData) {
diff --git a/src/pie-chart/styles.scss b/src/pie-chart/styles.scss
index 4ae6435623..6907bba55d 100644
--- a/src/pie-chart/styles.scss
+++ b/src/pie-chart/styles.scss
@@ -27,10 +27,6 @@
}
}
-.content--fit-height {
- flex: 1;
-}
-
.status-container {
/* used in test utils */
}
@@ -38,24 +34,6 @@
.chart-container {
display: flex;
flex: 1;
-
- &--fit-height {
- height: 100%;
- min-height: inherit;
- }
-}
-
-.chart-container-chart-plot {
- display: contents;
-
- &--fit-height {
- display: block;
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- }
}
.inner-content {
diff --git a/src/pie-chart/utils.ts b/src/pie-chart/utils.ts
index 48aa91e576..3824ef6618 100644
--- a/src/pie-chart/utils.ts
+++ b/src/pie-chart/utils.ts
@@ -4,7 +4,7 @@ import { ComponentFormatFunction } from '../internal/i18n/context';
import { PieChartProps } from './interfaces';
import styles from './styles.css.js';
-export interface Dimension {
+interface Dimension {
innerRadius: number;
outerRadius: number;
padding: number;
@@ -13,31 +13,27 @@ export interface Dimension {
cornerRadius?: number;
}
-const paddingLabels = 44; // = 2 * (size-lineHeight-body-100)
-const defaultPadding = 12; // = space-s
-const smallPadding = 8; // = space-xs
-
export const dimensionsBySize: Record, Dimension> = {
small: {
innerRadius: 33,
outerRadius: 50,
- innerLabelPadding: smallPadding,
- padding: smallPadding,
- paddingLabels,
+ innerLabelPadding: 8,
+ padding: 8, // = space-xs
+ paddingLabels: 44, // = 2 * (size-lineHeight-body-100)
},
medium: {
innerRadius: 66,
outerRadius: 100,
- innerLabelPadding: defaultPadding,
- padding: defaultPadding,
- paddingLabels,
+ innerLabelPadding: 12,
+ padding: 12, // = space-s
+ paddingLabels: 44, // = 2 * (size-lineHeight-body-100)
},
large: {
innerRadius: 93,
outerRadius: 140,
- innerLabelPadding: defaultPadding,
- padding: defaultPadding,
- paddingLabels,
+ innerLabelPadding: 12,
+ padding: 12, // = space-s
+ paddingLabels: 44, // = 2 * (size-lineHeight-body-100)
},
};
@@ -59,43 +55,6 @@ export const refreshDimensionsBySize: Record,
},
};
-/**
- * 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,
-}: {
- size: NonNullable | number;
- hasLabels: boolean;
- visualRefresh?: boolean;
-}): Dimension & { size: NonNullable } {
- if (typeof size === 'string') {
- const dimensions = visualRefresh ? refreshDimensionsBySize[size] : dimensionsBySize[size];
- return { ...dimensions, size };
- }
- const sizeSpec = visualRefresh ? refreshDimensionsBySize : dimensionsBySize;
- const getPixelSize = (d: Dimension) => d.outerRadius * 2 + d.padding * 2 + (hasLabels ? d.paddingLabels : 0) * 2;
-
- let matchedSize: NonNullable = '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 { ...sizeSpec[matchedSize], outerRadius, innerRadius, size: matchedSize };
-}
-
export const defaultDetails =
(i18n: ComponentFormatFunction<'pie-chart'>, i18nStrings: PieChartProps.I18nStrings) =>
(datum: PieChartProps.Datum, dataSum: number) =>