Donut selection ring

src/constants.ts

@@ -77,8 +77,8 @@ export const LINEAR_PADDING = 32;
 export const TRELLIS_PADDING = 0.2;
 
 // donut constants
-/** Calculation for donut radius */
-export const DONUT_RADIUS = 'min(width, height) / 2';
+/** Calculation for donut radius, subtract 2 pixels to make room for the selection ring */
+export const DONUT_RADIUS = '(min(width, height) / 2 - 2)';
 /** Min arc angle radians to display a direct label. If the arc angle is less than this, the direct label will be hidden. */
 export const DONUT_DIRECT_LABEL_MIN_ANGLE = 0.3;
 /** Min font size for the donut summary metric value */

src/specBuilder/donut/donutUtils.ts

@@ -9,8 +9,16 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import { DONUT_DIRECT_LABEL_MIN_ANGLE, DONUT_RADIUS, DONUT_SUMMARY_MIN_RADIUS, FILTERED_TABLE } from '@constants';
+import {
+	DONUT_DIRECT_LABEL_MIN_ANGLE,
+	DONUT_RADIUS,
+	DONUT_SUMMARY_MIN_RADIUS,
+	FILTERED_TABLE,
+	MARK_ID,
+	SELECTED_ITEM,
+} from '@constants';
 import { getColorProductionRule, getCursor, getMarkOpacity, getTooltip } from '@specBuilder/marks/markUtils';
+import { getColorValue } from '@specBuilder/specUtils';
 import { getTextNumberFormat } from '@specBuilder/textUtils';
 import {
 	ArcMark,
@@ -37,6 +45,7 @@ export const getArcMark = (props: DonutSpecProps): ArcMark => {
 				x: { signal: 'width / 2' },
 				y: { signal: 'height / 2' },
 				tooltip: getTooltip(children, name),
+				stroke: { value: getColorValue('static-blue', colorScheme) },
 			},
 			update: {
 				startAngle: { field: 'startAngle' },
@@ -46,6 +55,7 @@ export const getArcMark = (props: DonutSpecProps): ArcMark => {
 				outerRadius: { signal: DONUT_RADIUS },
 				opacity: getMarkOpacity(props),
 				cursor: getCursor(children),
+				strokeWidth: [{ test: `${SELECTED_ITEM} === datum.${MARK_ID}`, value: 2 }, { value: 0 }],
 			},
 		},
 	};

src/stories/components/ChartPopover/ChartPopover.story.tsx

@@ -12,13 +12,16 @@
 import React, { ReactElement } from 'react';
 
 import useChartProps from '@hooks/useChartProps';
-import { Area, Axis, Bar, Chart, ChartPopover, ChartProps, ChartTooltip, Legend, Line } from '@rsc';
+import { Area, Axis, Bar, Chart, ChartPopover, ChartProps, ChartTooltip, Datum, Legend, Line } from '@rsc';
 import { browserData as data } from '@stories/data/data';
 import { StoryFn } from '@storybook/react';
 import { bindWithProps } from '@test-utils';
+import { Donut } from 'alpha/components';
 
 import { Content } from '@adobe/react-spectrum';
 
+import { basicDonutData } from '../Donut/data';
+
 export default {
 	title: 'RSC/ChartPopover',
 	component: ChartPopover,
@@ -32,7 +35,7 @@ export default {
 	},
 };
 
-const dialogContent = (datum) => (
+const dialogContent = (datum: Datum) => (
 	<Content>
 		<div>Operating system: {datum.series}</div>
 		<div>Browser: {datum.category}</div>
@@ -108,6 +111,28 @@ const AreaStory: StoryFn<typeof ChartPopover> = (args): ReactElement => {
 	);
 };
 
+// content for tooltip and popover
+const donutDialogContent = (datum: Datum) => {
+	return (
+		<Content>
+			<div>Browser: {datum.browser}</div>
+			<div>Visitors: {datum.count}</div>
+		</Content>
+	);
+};
+
+const DonutStory: StoryFn<typeof ChartPopover> = (args): ReactElement => {
+	const chartProps = useChartProps({ data: basicDonutData, width: 350, height: 350 });
+	return (
+		<Chart {...chartProps}>
+			<Donut metric="count" metricLabel="Visitors" color="browser">
+				<ChartTooltip>{donutDialogContent}</ChartTooltip>
+				<ChartPopover {...args} />
+			</Donut>
+		</Chart>
+	);
+};
+
 const Canvas = bindWithProps(ChartPopoverCanvasStory);
 Canvas.args = { children: dialogContent, width: 'auto' };
 
@@ -135,4 +160,7 @@ LineChart.args = { children: dialogContent, width: 'auto' };
 const StackedBarChart = bindWithProps(ChartPopoverSvgStory);
 StackedBarChart.args = { children: dialogContent, width: 'auto' };
 
-export { Canvas, Svg, Size, MinWidth, OnOpenChange, AreaChart, DodgedBarChart, LineChart, StackedBarChart };
+const DonutChart = bindWithProps(DonutStory);
+DonutChart.args = { children: donutDialogContent, width: 'auto' };
+
+export { Canvas, Svg, Size, MinWidth, OnOpenChange, AreaChart, DodgedBarChart, LineChart, StackedBarChart, DonutChart };

src/stories/components/ChartPopover/ChartPopover.test.tsx

@@ -31,6 +31,7 @@ import userEvent from '@testing-library/user-event';
 import {
 	Canvas,
 	DodgedBarChart,
+	DonutChart,
 	LineChart,
 	MinWidth,
 	OnOpenChange,
@@ -233,4 +234,30 @@ describe('ChartPopover', () => {
 		await userEvent.click(chart);
 		expect(onOpenChange).toHaveBeenCalledWith(false);
 	});
+
+	test('DonutChart', async () => {
+		render(<DonutChart {...DonutChart.args} />);
+
+		const chart = await findChart();
+		expect(chart).toBeInTheDocument();
+		let segments = getAllMarksByGroupName(chart, 'donut0');
+		expect(segments).toHaveLength(7);
+
+		// clicking the bar should open the popover
+		await clickNthElement(segments, 4);
+		const popover = await screen.findByTestId('rsc-popover');
+		await waitFor(() => expect(popover).toBeInTheDocument()); // waitFor to give the popover time to make sure it doesn't close
+
+		// check the content of the popover
+		expect(within(popover).getByText('Browser: Other')).toBeInTheDocument();
+		expect(within(popover).getByText('Visitors: 4201')).toBeInTheDocument();
+
+		segments = getAllMarksByGroupName(chart, 'donut0');
+
+		// validate the highlight visuals are present
+		expect(segments[0]).toHaveAttribute('opacity', `${1 / HIGHLIGHT_CONTRAST_RATIO}`);
+		expect(segments[4]).toHaveAttribute('opacity', '1');
+		expect(segments[4]).toHaveAttribute('stroke', spectrumColors.light['static-blue']);
+		expect(segments[4]).toHaveAttribute('stroke-width', '2');
+	});
 });

src/stories/components/Donut/Donut.test.tsx

@@ -35,7 +35,7 @@ describe('Donut', () => {
 		test('text should be target size', async () => {
 			render(<Basic {...Basic.args} width={300} height={300} />);
 			const metricValue = await screen.findByText('40.4K');
-			expect(metricValue).toHaveAttribute('font-size', '45px');
+			expect(metricValue).toHaveAttribute('font-size', '44px');
 		});
 
 		test('small donut, text should be min size', async () => {
@@ -52,7 +52,7 @@ describe('Donut', () => {
 	});
 
 	test('metric label text should be 1/2 the size of the metric value text', async () => {
-		render(<Basic {...Basic.args} width={200} height={200} />);
+		render(<Basic {...Basic.args} width={204} height={204} />);
 		const metricValue = await screen.findByText('40.4K');
 		expect(metricValue).toHaveAttribute('font-size', '30px');
 		const metricLabel = await screen.findByText('Visitors');