refactor: initial work to productionize donut

src/constants.ts

@@ -76,6 +76,10 @@ export const PADDING_RATIO = 0.4;
 export const LINEAR_PADDING = 32;
 export const TRELLIS_PADDING = 0.2;
 
+// donut constants
+export const DONUT_RADIUS = 'min(width, height) / 2';
+export const DONUT_DIRECT_LABEL_MIN_ANGLE = 0.3;
+
 // ratio that each opacity is divded by when hovering or highlighting from legend
 export const HIGHLIGHT_CONTRAST_RATIO = 5;
 

src/specBuilder/bar/barTestUtils.ts

@@ -17,14 +17,9 @@ import {
 	DEFAULT_COLOR,
 	DEFAULT_COLOR_SCHEME,
 	DEFAULT_METRIC,
-	DEFAULT_OPACITY_RULE,
 	DEFAULT_SECONDARY_COLOR,
 	FILTERED_TABLE,
-	HIGHLIGHTED_ITEM,
-	HIGHLIGHT_CONTRAST_RATIO,
-	MARK_ID,
 	PADDING_RATIO,
-	SELECTED_ITEM,
 	STACK_ID,
 	TRELLIS_PADDING,
 } from '@constants';
@@ -114,13 +109,6 @@ export const defaultDodgedCornerRadiusEncodings: RectEncodeEntry = {
 
 export const defaultBarFillOpacity: ProductionRule<NumericValueRef> = [{ value: 1 }];
 
-export const defaultBarPopoverOpacity: ProductionRule<NumericValueRef> = [
-	{ test: `${SELECTED_ITEM} && ${SELECTED_ITEM} !== datum.${MARK_ID}`, value: 1 / HIGHLIGHT_CONTRAST_RATIO },
-	{ test: `${SELECTED_ITEM} && ${SELECTED_ITEM} === datum.${MARK_ID}`, value: 1 },
-	{ test: `${HIGHLIGHTED_ITEM} && ${HIGHLIGHTED_ITEM} !== datum.${MARK_ID}`, value: 1 / HIGHLIGHT_CONTRAST_RATIO },
-	DEFAULT_OPACITY_RULE,
-];
-
 export const stackedXScale = 'xBand';
 export const dodgedXScale = `${defaultBarProps.name}_position`;
 export const dodgedGroupField = `${defaultBarProps.name}_dodgeGroup`;

src/specBuilder/bar/barUtils.test.ts

@@ -13,17 +13,13 @@ import { createElement } from 'react';
 
 import { Annotation } from '@components/Annotation';
 import { ChartPopover } from '@components/ChartPopover';
-import { ChartTooltip } from '@components/ChartTooltip';
 import {
 	COLOR_SCALE,
 	CORNER_RADIUS,
 	DEFAULT_CATEGORICAL_DIMENSION,
 	DEFAULT_COLOR,
 	DEFAULT_METRIC,
-	DEFAULT_OPACITY_RULE,
 	FILTERED_TABLE,
-	HIGHLIGHTED_ITEM,
-	HIGHLIGHT_CONTRAST_RATIO,
 	MARK_ID,
 	PADDING_RATIO,
 	SELECTED_ITEM,
@@ -34,7 +30,6 @@ import { RectEncodeEntry } from 'vega';
 import { BarSpecProps } from '../../types';
 import {
 	defaultBarEnterEncodings,
-	defaultBarPopoverOpacity,
 	defaultBarProps,
 	defaultBarPropsWithSecondayColor,
 	defaultCornerRadiusEncodings,
@@ -54,7 +49,6 @@ import {
 	getAnnotationMarks,
 	getAnnotationMetricAxisPosition,
 	getAnnotationPositionOffset,
-	getBarOpacity,
 	getBarPadding,
 	getBaseBarEnterEncodings,
 	getCornerRadiusEncodings,
@@ -327,26 +321,6 @@ describe('barUtils', () => {
 		});
 	});
 
-	describe('getBarOpacity()', () => {
-		test('no children, should use default opacity', () => {
-			expect(getBarOpacity(defaultBarProps)).toStrictEqual([DEFAULT_OPACITY_RULE]);
-		});
-		test('Tooltip child, should return tests for hover and default to opacity', () => {
-			const tooltip = createElement(ChartTooltip);
-			expect(getBarOpacity({ ...defaultBarProps, children: [tooltip] })).toStrictEqual([
-				{
-					test: `${HIGHLIGHTED_ITEM} && ${HIGHLIGHTED_ITEM} !== datum.${MARK_ID}`,
-					value: 1 / HIGHLIGHT_CONTRAST_RATIO,
-				},
-				DEFAULT_OPACITY_RULE,
-			]);
-		});
-		test('Popover child, should return tests for hover and select and default to opacity', () => {
-			const popover = createElement(ChartPopover);
-			expect(getBarOpacity({ ...defaultBarProps, children: [popover] })).toStrictEqual(defaultBarPopoverOpacity);
-		});
-	});
-
 	describe('getStroke()', () => {
 		test('should return production rule with one item in array if there is not a popover', () => {
 			const strokeRule = getStroke(defaultBarProps);

src/specBuilder/bar/barUtils.ts

@@ -15,22 +15,19 @@ import {
 	ANNOTATION_FONT_WEIGHT,
 	BACKGROUND_COLOR,
 	CORNER_RADIUS,
-	DEFAULT_OPACITY_RULE,
 	DISCRETE_PADDING,
 	FILTERED_TABLE,
-	HIGHLIGHT_CONTRAST_RATIO,
 	MARK_ID,
 	SELECTED_ITEM,
 	STACK_ID,
 } from '@constants';
-import { addTooltipMarkOpacityRules } from '@specBuilder/chartTooltip/chartTooltipUtils';
 import {
 	getColorProductionRule,
 	getCursor,
+	getMarkOpacity,
 	getOpacityProductionRule,
 	getStrokeDashProductionRule,
 	getTooltip,
-	hasInteractiveChildren,
 	hasPopover,
 } from '@specBuilder/marks/markUtils';
 import { getColorValue, getLineWidthPixelsFromLineWidth } from '@specBuilder/specUtils';
@@ -368,36 +365,12 @@ export const getBarEnterEncodings = ({ children, color, colorScheme, name, opaci
 
 export const getBarUpdateEncodings = (props: BarSpecProps): EncodeEntry => ({
 	cursor: getCursor(props.children),
-	opacity: getBarOpacity(props),
+	opacity: getMarkOpacity(props),
 	stroke: getStroke(props),
 	strokeDash: getStrokeDash(props),
 	strokeWidth: getStrokeWidth(props),
 });
 
-export const getBarOpacity = (props: BarSpecProps): ProductionRule<NumericValueRef> => {
-	const { children } = props;
-	const rules: ({ test?: string } & NumericValueRef)[] = [DEFAULT_OPACITY_RULE];
-	// if there aren't any interactive components, then we don't need to add special opacity rules
-	if (!hasInteractiveChildren(children)) {
-		return rules;
-	}
-
-	addTooltipMarkOpacityRules(rules, props);
-
-	// if a bar is hovered/selected, all other bars should have reduced opacity
-	if (hasPopover(children)) {
-		return [
-			{
-				test: `${SELECTED_ITEM} && ${SELECTED_ITEM} !== datum.${MARK_ID}`,
-				value: 1 / HIGHLIGHT_CONTRAST_RATIO,
-			},
-			{ test: `${SELECTED_ITEM} && ${SELECTED_ITEM} === datum.${MARK_ID}`, ...DEFAULT_OPACITY_RULE },
-			...rules,
-		];
-	}
-	return rules;
-};
-
 export const getStroke = ({ children, color, colorScheme }: BarSpecProps): ProductionRule<ColorValueRef> => {
 	const defaultProductionRule = getColorProductionRule(color, colorScheme);
 	if (!hasPopover(children)) {

src/specBuilder/donut/donutSpecBuilder.test.ts

@@ -17,24 +17,9 @@ import { defaultSignals } from '@specBuilder/specTestUtils';
 
 import { DonutSpecProps } from '../../types';
 import { addData, addDonut, addMarks, addScales, addSignals } from './donutSpecBuilder';
+import { defaultDonutProps } from './donutTestUtils';
 import { getAggregateMetricMark, getArcMark, getDirectLabelMark, getPercentMetricMark } from './donutUtils';
 
-const defaultDonutProps: DonutSpecProps = {
-	index: 0,
-	colorScheme: 'light',
-	markType: 'donut',
-	metric: 'testMetric',
-	startAngle: 0,
-	name: 'testName',
-	isBoolean: false,
-	segment: 'testSegment',
-	color: 'testColor',
-	holeRatio: 0.5,
-	metricLabel: 'testLabel',
-	hasDirectLabels: true,
-	children: [],
-};
-
 describe('addData', () => {
 	test('should add data correctly for boolean donut', () => {
 		const data = [{ name: FILTERED_TABLE }];
@@ -105,42 +90,17 @@ describe('addMarks', () => {
 		const marks = [];
 		const props = { ...defaultDonutProps, isBoolean: true };
 		const result = addMarks(marks, props);
-		const expectedMarks = [
-			getArcMark(props.name, props.holeRatio, 'min(width, height) / 2', props.children),
-			getPercentMetricMark(
-				props.name,
-				props.metric,
-				'min(width, height) / 2',
-				props.holeRatio,
-				props.metricLabel
-			),
-		];
+		const expectedMarks = [getArcMark(props), getPercentMetricMark(props)];
 		expect(result).toEqual(expectedMarks);
 	});
 
 	test('should add marks correctly for non-boolean donut', () => {
 		const marks = [];
 		const result = addMarks(marks, defaultDonutProps);
 		const expectedMarks = [
-			getArcMark(
-				defaultDonutProps.name,
-				defaultDonutProps.holeRatio,
-				'min(width, height) / 2',
-				defaultDonutProps.children
-			),
-			getAggregateMetricMark(
-				defaultDonutProps.name,
-				defaultDonutProps.metric,
-				'min(width, height) / 2',
-				defaultDonutProps.holeRatio,
-				defaultDonutProps.metricLabel
-			),
-			getDirectLabelMark(
-				defaultDonutProps.name,
-				'min(width, height) / 2',
-				defaultDonutProps.metric,
-				defaultDonutProps.segment!
-			),
+			getArcMark(defaultDonutProps),
+			getAggregateMetricMark(defaultDonutProps),
+			getDirectLabelMark({ ...defaultDonutProps, segment: 'testSegment' }),
 		];
 		expect(result).toEqual(expectedMarks);
 	});

src/specBuilder/donut/donutSpecBuilder.ts

@@ -113,19 +113,18 @@ export const addScales = produce<Scale[], [DonutSpecProps]>((scales, props) => {
 });
 
 export const addMarks = produce<Mark[], [DonutSpecProps]>((marks, props) => {
-	const { holeRatio, name, metricLabel, metric, segment, hasDirectLabels, isBoolean, children } = props;
-	const radius = 'min(width, height) / 2';
+	const { segment, hasDirectLabels, isBoolean } = props;
 
-	marks.push(getArcMark(name, holeRatio, radius, children));
+	marks.push(getArcMark(props));
 	if (isBoolean) {
-		marks.push(getPercentMetricMark(name, metric, radius, holeRatio, metricLabel));
+		marks.push(getPercentMetricMark(props));
 	} else {
-		marks.push(getAggregateMetricMark(name, metric, radius, holeRatio, metricLabel));
+		marks.push(getAggregateMetricMark(props));
 		if (hasDirectLabels) {
 			if (!segment) {
 				throw new Error('If a Donut chart hasDirectLabels, a segment property name must be supplied.');
 			}
-			marks.push(getDirectLabelMark(name, radius, metric, segment));
+			marks.push(getDirectLabelMark({ ...props, segment }));
 		}
 	}
 });

src/specBuilder/donut/donutTestUtils.ts

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { DonutSpecProps } from '../../types';
+
+export const defaultDonutProps: DonutSpecProps = {
+	index: 0,
+	colorScheme: 'light',
+	markType: 'donut',
+	metric: 'testMetric',
+	startAngle: 0,
+	name: 'testName',
+	isBoolean: false,
+	segment: 'testSegment',
+	color: 'testColor',
+	holeRatio: 0.85,
+	metricLabel: 'testLabel',
+	hasDirectLabels: true,
+	children: [],
+};