Bar on click

src/RscChart.tsx

@@ -27,6 +27,7 @@ import {
 } from '@constants';
 import useChartImperativeHandle from '@hooks/useChartImperativeHandle';
 import useLegend from '@hooks/useLegend';
+import useMarkOnClicks from '@hooks/useMarkOnClicks';
 import usePopoverAnchorStyle from '@hooks/usePopoverAnchorStyle';
 import usePopovers, { PopoverDetail } from '@hooks/usePopovers';
 import useSpec from '@hooks/useSpec';
@@ -152,6 +153,7 @@ export const RscChart = forwardRef<ChartHandle, RscChartProps>(
 
 		const tooltips = useTooltips(sanitizedChildren);
 		const popovers = usePopovers(sanitizedChildren);
+		const onMarkClicks = useMarkOnClicks(sanitizedChildren);
 
 		// gets the correct css style to display the anchor in the correct position
 		const targetStyle = usePopoverAnchorStyle(
@@ -259,7 +261,7 @@ export const RscChart = forwardRef<ChartHandle, RscChartProps>(
 								tooltipHandler.call(this, event, item, value);
 							}
 						});
-						if (popovers.length || legendIsToggleable || onLegendClick) {
+						if (popovers.length || onMarkClicks.length || legendIsToggleable || onLegendClick) {
 							if (legendIsToggleable) {
 								view.signal('hiddenSeries', legendHiddenSeries);
 							}
@@ -278,7 +280,9 @@ export const RscChart = forwardRef<ChartHandle, RscChartProps>(
 									selectedDataName,
 									setLegendHiddenSeries,
 									legendIsToggleable,
-									onLegendClick
+									onLegendClick,
+									onMarkClicks,
+
 								)
 							);
 						}

src/hooks/useMarkOnClicks.tsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2023 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 { createElement, useMemo } from 'react';
+
+import { getAllMarkElements } from '@utils';
+
+import { Chart } from '../Chart';
+import { Bar } from '../components/Bar';
+import { BarElement, ChartChildElement, Datum } from '../types';
+
+type MappedMarkElement = { name: string; element: BarElement };
+
+export type MarkDetail = {
+	markName?: string;
+    onClick?: (datum: Datum) => void;
+};
+
+export default function useMarkOnClicks(children: ChartChildElement[]): MarkDetail[] {
+    const markElements = useMemo(
+		() => getAllMarkElements(createElement(Chart, { data: [] }, children), Bar, []) as MappedMarkElement[],
+		[children]
+	);
+	return useMemo(
+		() => 
+			markElements
+				.filter((mark) => mark.element.props.onClick)
+				.map((mark) => ({
+					markName: mark.name,
+					onClick: mark.element.props.onClick,
+				})) as MarkDetail[],
+		[markElements]
+	);
+}

src/specBuilder/bar/barTestUtils.ts

@@ -117,7 +117,6 @@ export const stackedLabelWithStyles = {
 	from: { data: FILTERED_TABLE },
 	name: 'bar0_annotationBackground',
 	interactive: false,
-
 	encode: {
 		enter: {
 			align: { value: 'center' },
@@ -145,7 +144,6 @@ export const stackedLabelBackground = {
 	from: { data: FILTERED_TABLE },
 	name: 'bar0_annotationBackground',
 	interactive: false,
-
 	encode: {
 		enter: {
 			align: { value: 'center' },
@@ -173,7 +171,6 @@ export const stackedLabelText = {
 	from: { data: FILTERED_TABLE },
 	name: 'bar0_annotationText',
 	interactive: false,
-
 	encode: {
 		enter: {
 			x: { scale: stackedXScale, field: defaultBarProps.dimension, band: 0.5 },

src/specBuilder/bar/barUtils.ts

@@ -224,7 +224,7 @@ export const getBarEnterEncodings = ({ children, color, colorScheme, name, opaci
 });
 
 export const getBarUpdateEncodings = (props: BarSpecProps): EncodeEntry => ({
-	cursor: getCursor(props.children),
+	cursor: getCursor(props.children, props),
 	opacity: getMarkOpacity(props),
 	stroke: getStroke(props),
 	strokeDash: getStrokeDash(props),

src/specBuilder/bar/dodgedBarUtils.ts

@@ -50,7 +50,7 @@ export const getDodgedMark = (props: BarSpecProps): GroupMark => {
 				name,
 				from: { data: `${name}_facet` },
 				type: 'rect',
-				interactive: getInteractive(children),
+				interactive: getInteractive(children, props),
 				encode: {
 					enter: {
 						...getBaseBarEnterEncodings(props),

src/specBuilder/bar/stackedBarUtils.ts

@@ -90,7 +90,7 @@ export const getStackedBar = (props: BarSpecProps): RectMark => {
 		name,
 		type: 'rect',
 		from: { data: isDodgedAndStacked(props) ? `${name}_facet` : getBaseDataSourceName(props) },
-		interactive: getInteractive(children),
+		interactive: getInteractive(children, props),
 		encode: {
 			enter: {
 				...getBaseBarEnterEncodings(props),

src/specBuilder/marks/markUtils.test.ts

@@ -47,6 +47,7 @@ import {
 	getSymbolSizeProductionRule,
 	getTooltip,
 	getXProductionRule,
+	getInteractive,
 	hasMetricRange,
 	hasTooltip,
 } from './markUtils';
@@ -224,6 +225,17 @@ describe('getXProductionRule()', () => {
 	});
 });
 
+describe('getInteractive()', () => {
+	const tooltip = createElement(ChartTooltip);
+	const popover = createElement(ChartPopover);
+	test('should return true based on having interactive children', () => {
+		expect(getInteractive([tooltip])).toEqual(true);
+		expect(getInteractive([])).toEqual(false);
+		expect(getInteractive([tooltip, popover])).toEqual(true);
+		expect(getInteractive(defaultBarProps.children, defaultBarProps)).toEqual(false);
+	});
+});
+
 describe('getColorProductionRuleSignalString()', () => {
 	test('should return signal reference if color is an array', () => {
 		expect(

src/specBuilder/marks/markUtils.ts

@@ -71,21 +71,21 @@ import {
 } from '../../types';
 
 /**
- * If a popover exists on the mark, then set the cursor to a pointer.
+ * If a popover or onClick prop exists on the mark, then set the cursor to a pointer.
  */
-export function getCursor(children: MarkChildElement[]): ScaledValueRef<Cursor> | undefined {
-	if (hasPopover(children)) {
+export function getCursor(children: MarkChildElement[], props?: BarSpecProps): ScaledValueRef<Cursor> | undefined {
+	if ((props?.onClick !== undefined) || hasPopover(children)) {
 		return { value: 'pointer' };
 	}
 }
 
 /**
- * If there aren't any tooltips or popovers on the mark, then set interactive to false.
+ * If there aren't any tooltips, popovers, or onClick props on the mark, then set interactive to false.
  * This prevents the mark from interfering with other interactive marks.
  */
-export function getInteractive(children: MarkChildElement[]): boolean {
+export function getInteractive(children: MarkChildElement[], props?: BarSpecProps): boolean {
 	// skip annotations
-	return hasInteractiveChildren(children);
+	return (props?.onClick !== undefined) || hasInteractiveChildren(children);
 }
 
 /**

src/stories/components/Bar/Bar.story.tsx

@@ -13,7 +13,7 @@ import React, { ReactElement, createElement } from 'react';
 
 import { Annotation } from '@components/Annotation';
 import useChartProps from '@hooks/useChartProps';
-import { Axis, Bar, Chart } from '@rsc';
+import { Axis, Bar, BarProps, Chart } from '@rsc';
 import { StoryFn } from '@storybook/react';
 import { bindWithProps } from '@test-utils';
 
@@ -35,54 +35,59 @@ const BarStory: StoryFn<typeof Bar> = (args): ReactElement => {
 	);
 };
 
-const Basic = bindWithProps(BarStory);
-Basic.args = {
+const defaultProps: BarProps = {
 	dimension: 'browser',
 	metric: 'downloads',
+	onClick: undefined,
+}
+
+const Basic = bindWithProps(BarStory);
+Basic.args = {
+	...defaultProps
 };
 
 const Horizontal = bindWithProps(BarStory);
 Horizontal.args = {
-	dimension: 'browser',
-	metric: 'downloads',
+	...defaultProps,
 	orientation: 'horizontal',
 };
 
 const LineType = bindWithProps(BarStory);
 LineType.args = {
-	dimension: 'browser',
-	metric: 'downloads',
+	...defaultProps,
 	opacity: { value: 0.75 },
 	lineType: { value: 'dashed' },
 	lineWidth: 2,
 };
 
 const Opacity = bindWithProps(BarStory);
 Opacity.args = {
-	dimension: 'browser',
-	metric: 'downloads',
+	...defaultProps,
 	opacity: { value: 0.75 },
 };
 
 const PaddingRatio = bindWithProps(BarStory);
 PaddingRatio.args = {
-	dimension: 'browser',
-	metric: 'downloads',
+	...defaultProps,
 	paddingRatio: 0.2,
 };
 
 const WithAnnotation = bindWithProps(BarStory);
 WithAnnotation.args = {
-	dimension: 'browser',
+	...defaultProps,
 	children: createElement(Annotation, { textKey: 'percentLabel' }),
-	metric: 'downloads',
 };
 
 const HasSquareCorners = bindWithProps(BarStory);
 HasSquareCorners.args = {
-	dimension: 'browser',
-	metric: 'downloads',
+	...defaultProps,
 	hasSquareCorners: true,
 };
 
-export { Basic, Horizontal, LineType, Opacity, PaddingRatio, WithAnnotation, HasSquareCorners };
+const OnClick = bindWithProps(BarStory);
+OnClick.args = {
+	dimension: 'browser',
+	metric: 'downloads',
+}
+
+export { Basic, Horizontal, LineType, Opacity, PaddingRatio, WithAnnotation, HasSquareCorners, OnClick };

src/stories/components/Bar/Bar.test.tsx

@@ -9,15 +9,14 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import React from 'react';
-
 import '@matchMediaMock';
 import { Bar } from '@rsc';
-import { findAllMarksByGroupName, findChart, render } from '@test-utils';
+import { clickNthElement, findAllMarksByGroupName, findChart, render } from '@test-utils';
 
-import { Basic, Opacity, PaddingRatio, WithAnnotation } from './Bar.story';
+import { Basic, Opacity, PaddingRatio, WithAnnotation, OnClick } from './Bar.story';
 import { Color, DodgedStacked } from './DodgedBar.story';
 import { Basic as StackedBasic } from './StackedBar.story';
+import { barData } from './data';
 
 describe('Bar', () => {
 	// Bar is not a real React component. This is test just provides test coverage for sonarqube
@@ -98,4 +97,26 @@ describe('Bar', () => {
 		const bars = await findAllMarksByGroupName(chart, 'bar0');
 		expect(bars.length).toEqual(9);
 	});
+
+	test('should call onClick callback when selecting a bar item', async () => {
+		const onClick = jest.fn();
+		render(<OnClick {...OnClick.args} onClick={onClick} />);
+		const chart = await findChart();
+		const bars = await findAllMarksByGroupName(chart, 'bar0');
+
+		await clickNthElement(bars, 0);
+		expect(onClick).toHaveBeenCalledWith(expect.objectContaining(barData[0]));
+
+		await clickNthElement(bars, 1);
+		expect(onClick).toHaveBeenCalledWith(expect.objectContaining(barData[1]));
+
+		await clickNthElement(bars, 2);
+		expect(onClick).toHaveBeenCalledWith(expect.objectContaining(barData[2]));
+
+		await clickNthElement(bars, 3);
+		expect(onClick).toHaveBeenCalledWith(expect.objectContaining(barData[3]));
+
+		await clickNthElement(bars, 4);
+		expect(onClick).toHaveBeenCalledWith(expect.objectContaining(barData[4]));
+	});
 });

src/stories/components/Bar/DodgedBar.story.tsx

@@ -13,7 +13,7 @@ import React, { ReactElement, createElement } from 'react';
 
 import { Annotation } from '@components/Annotation';
 import useChartProps from '@hooks/useChartProps';
-import { Axis, Bar, Chart, ChartPopover, ChartTooltip, Legend, categorical6 } from '@rsc';
+import { Axis, Bar, BarProps, Chart, ChartPopover, ChartTooltip, Legend, categorical6 } from '@rsc';
 import { StoryFn } from '@storybook/react';
 import { bindWithProps } from '@test-utils';
 
@@ -82,25 +82,28 @@ const DodgedBarLineTypeStory: StoryFn<typeof Bar> = (args): ReactElement => {
 	);
 };
 
-const Color = bindWithProps(DodgedBarStory);
-Color.args = {
+const defaultProps: BarProps = {
 	type: 'dodged',
 	dimension: 'browser',
+	onClick: undefined,
+}
+
+const Color = bindWithProps(DodgedBarStory);
+Color.args = {
+	...defaultProps,
 	order: 'order',
 	color: 'operatingSystem',
 };
 
 const DodgedStacked = bindWithProps(DodgedBarStory);
 DodgedStacked.args = {
-	type: 'dodged',
-	dimension: 'browser',
+	...defaultProps,
 	color: ['operatingSystem', 'version'],
 };
 
 const LineType = bindWithProps(DodgedBarLineTypeStory);
 LineType.args = {
-	type: 'dodged',
-	dimension: 'browser',
+	...defaultProps,
 	order: 'order',
 	lineType: 'operatingSystem',
 	lineWidth: 2,
@@ -109,27 +112,32 @@ LineType.args = {
 
 const Opacity = bindWithProps(DodgedBarStory);
 Opacity.args = {
-	type: 'dodged',
-	dimension: 'browser',
+	...defaultProps,
 	order: 'order',
 	opacity: 'operatingSystem',
 };
 
 const Popover = bindWithProps(DodgedBarPopoverStory);
 Popover.args = {
-	type: 'dodged',
-	dimension: 'browser',
+	...defaultProps,
 	order: 'order',
 	color: 'operatingSystem',
 };
 
 const DodgedStackedWithLabels = bindWithProps(DodgedBarStory);
 DodgedStackedWithLabels.args = {
-	type: 'dodged',
-	dimension: 'browser',
+	...defaultProps,
 	color: ['operatingSystem', 'version'],
 	children: createElement(Annotation, { textKey: 'percentLabel' }),
 	paddingRatio: 0.1,
 };
 
-export { Color, DodgedStacked, DodgedStackedWithLabels, LineType, Opacity, Popover };
+const OnClick = bindWithProps(DodgedBarStory);
+OnClick.args = {
+	type: 'dodged',
+	dimension: 'browser',
+	order: 'order',
+	color: 'operatingSystem',
+};
+
+export { Color, DodgedStacked, DodgedStackedWithLabels, LineType, Opacity, Popover, OnClick };