chore: made big number compatible with RSC v1.13.2

src/Chart.tsx

@@ -20,16 +20,14 @@ import useChartWidth from '@hooks/useChartWidth';
 import { useResizeObserver } from '@hooks/useResizeObserver';
 import { BigNumber } from '@rsc';
 import { getColorValue } from '@specBuilder/specUtils';
-import { chartContainsBigNumber, toArray } from '@utils';
-
+import { getBigNumberElementsFromChildren, toArray } from '@utils';
 import { v4 as uuid } from 'uuid';
 import { View } from 'vega';
 
 import { Provider, defaultTheme } from '@adobe/react-spectrum';
 import { Theme } from '@react-types/provider';
 
 import './Chart.css';
-
 import { RscChart } from './RscChart';
 import { BigNumberElement, ChartData, ChartHandle, ChartProps, LineType, RscChartProps } from './types';
 
@@ -99,10 +97,10 @@ export const Chart = forwardRef<ChartHandle, ChartProps>(
 
 		const showPlaceholderContent = useMemo(() => Boolean(loading ?? !data.length), [loading, data]);
 
-		const bigNumberChildren = chartContainsBigNumber(props.children);
+		const bigNumberElements = getBigNumberElementsFromChildren(props.children);
 
 		const bigNumberProps =
-			bigNumberChildren.length > 0 ? (bigNumberChildren[0] as BigNumberElement).props : undefined;
+			bigNumberElements.length > 0 ? (bigNumberElements[0] as BigNumberElement).props : undefined;
 
 		useEffect(() => {
 			// if placeholder content is displayed, clear out the chartview so it can't be downloaded or copied to clipboard
@@ -124,9 +122,13 @@ export const Chart = forwardRef<ChartHandle, ChartProps>(
 			);
 		}
 
-		if (bigNumberProps && toArray(props.children).length != bigNumberChildren.length) {
+		const childrenCount = toArray(props.children).length;
+		const bigNumberCount = bigNumberElements.length;
+		if (bigNumberProps && childrenCount != bigNumberCount) {
 			console.warn(
-				'If passing BigNumber to Chart only the BigNumber will be displayed. All other elements will be ignored'
+				`Detected ${
+					childrenCount - bigNumberCount
+				} children in the chart that are not BigNumber. Only BigNumber will be displayed. All other elements will be ignored`
 			);
 		}
 
@@ -152,7 +154,7 @@ export const Chart = forwardRef<ChartHandle, ChartProps>(
 			symbolSizes: symbolSizes,
 			title: title,
 			chartWidth: chartWidth,
-      chartHeight: chartHeight,
+			chartHeight: chartHeight,
 			UNSAFE_vegaSpec: UNSAFE_vegaSpec,
 		};
 
@@ -180,7 +182,7 @@ export const Chart = forwardRef<ChartHandle, ChartProps>(
 						<PlaceholderContent
 							loading={loading}
 							data={data}
-							height={height}
+							height={chartHeight}
 							emptyStateText={emptyStateText}
 						/>
 					) : (

src/components/BigNumber/BigNumber.tsx

@@ -46,9 +46,10 @@ const BigNumber: FC<BigNumberProps> = ({
 		chartId,
 		chartView,
 		chartWidth: 200,
+		chartHeight: 200,
 	};
 
-	const { chartWidth, height, locale, data, ...rscChartRemain } = rscChartProps;
+	const { chartWidth, chartHeight, locale, data, ...rscChartRemain } = rscChartProps;
 	const bigNumberValue = getBigNumberValue(data, dataKey, method);
 	const numberLocale = getLocale(locale).number;
 	const formattedValue = getFormattedString(bigNumberValue, numberType, numberFormat, numberLocale);
@@ -60,7 +61,7 @@ const BigNumber: FC<BigNumberProps> = ({
 	}
 
 	const { iconSize, labelSize, valueSize, pointSize, cWidth, cHeight, padding, textAlign, direction, iconDirection } =
-		getDynamicProperties(orientation, chartWidth, lineProps, height);
+		getDynamicProperties(orientation, chartWidth, lineProps, chartHeight);
 
 	const labelStyle: CSSProperties = { fontSize: labelSize, textAlign };
 	const valueStyle: CSSProperties = { fontSize: valueSize, textAlign };
@@ -72,11 +73,17 @@ const BigNumber: FC<BigNumberProps> = ({
 				justifyContent={'center'}
 				direction={direction}
 				width={chartWidth}
-				height={height}
+				height={chartHeight}
 			>
 				{lineProps && (
 					<Flex justifySelf={'center'} alignSelf={'center'} marginTop="5px">
-						<RscChart chartWidth={cWidth} height={cHeight} data={data} locale={locale} {...rscChartRemain}>
+						<RscChart
+							chartWidth={cWidth}
+							chartHeight={cHeight}
+							data={data}
+							locale={locale}
+							{...rscChartRemain}
+						>
 							<Line
 								{...lineProps}
 								isSparkline

src/specBuilder/line/linePointUtils.ts

@@ -52,7 +52,7 @@ export const getLineStaticPoint = ({
 			enter: {
 				size: { value: pointSize } ,
 				fill: isSparkline ? { signal: BACKGROUND_COLOR } : getColorProductionRule(color, colorScheme),
-				stroke: isSparkline ? getColorProductionRule(color, colorScheme) : { signal: BACKGROUND_COLOR }
+				stroke: isSparkline ? getColorProductionRule(color, colorScheme) : { signal: BACKGROUND_COLOR },
 				y: getYProductionRule(metricAxis, metric),
 			},
 			update: {

src/types/Chart.ts

@@ -15,6 +15,7 @@ import { GROUP_DATA, INTERACTION_MODE, MARK_ID, SERIES_ID, TRENDLINE_VALUE } fro
 import { Config, Data, FontWeight, Locale, NumberLocale, Padding, Spec, SymbolShape, TimeLocale, View } from 'vega';
 
 import { Icon, IconProps } from '@adobe/react-spectrum';
+import { IconPropsWithoutChildren } from '@react-spectrum/icon';
 import { Theme } from '@react-types/provider';
 
 import { Colors, SpectrumColor } from './SpectrumVizColors';
@@ -34,8 +35,8 @@ export type LegendElement = ReactElement<LegendProps, JSXElementConstructor<Lege
 export type LineElement = ReactElement<LineProps, JSXElementConstructor<LineProps>>;
 export type BigNumberElement = ReactElement<BigNumberProps, JSXElementConstructor<BigNumberProps>>;
 export type IconElement = ReactElement<
-	IconProps | Omit<IconProps, 'children'>,
-	JSXElementConstructor<IconProps | Omit<IconProps, 'children'>>
+	IconProps | IconPropsWithoutChildren,
+	JSXElementConstructor<IconProps | IconPropsWithoutChildren>
 >;
 export type ScatterPathElement = ReactElement<ScatterPathProps, JSXElementConstructor<ScatterPathProps>>;
 export type SegmentLabelElement = ReactElement<SegmentLabelProps, JSXElementConstructor<SegmentLabelProps>>;
@@ -420,9 +421,9 @@ export interface LineProps extends Omit<MarkProps, 'color'> {
 	/** Sets the chart area padding, this is a ratio from 0 to 1 for categorical scales (point) and a pixel value for continuous scales (time, linear) */
 	padding?: number;
 	pointSize?: number;
-  /** line to be interpreted and rendered as a sparkline. For example, Changes the fill of static points. */
+	/** line to be interpreted and rendered as a sparkline. For example, Changes the fill of static points. */
 	isSparkline?: boolean;
-  /** sparkline's method is last - meaning that last element of data has the static point */
+	/** sparkline's method is last - meaning that last element of data has the static point */
 	isMethodLast?: boolean;
 	/** Sets the type of scale that should be used for the trend */
 	scaleType?: ScaleType;
@@ -796,7 +797,7 @@ export type Children<T> = ChildElement<T> | ChildElement<T>[];
 export type AxisChildElement = ReferenceLineElement | AxisAnnotationElement;
 export type AxisAnnotationChildElement = ChartTooltipElement | ChartPopoverElement;
 
-export type BigNumberChildElement = LineElement | IconElement;
+export type BigNumberChildElement = LineElement;
 
 export type TrendlineChildElement = ChartTooltipElement | TrendlineAnnotationElement;
 export type ChartChildElement =

src/utils/utils.ts

@@ -18,7 +18,7 @@ import {
 	Axis,
 	AxisAnnotation,
 	Bar,
-  BigNumber,
+	BigNumber,
 	ChartPopover,
 	ChartTooltip,
 	Legend,
@@ -40,16 +40,18 @@ import {
 	AxisAnnotationChildElement,
 	AxisAnnotationElement,
 	AxisChildElement,
-	BigNumberChildElement,
 	AxisElement,
 	BarElement,
+	BigNumberChildElement,
+	BigNumberElement,
 	ChartChildElement,
 	ChartElement,
 	ChartTooltipElement,
 	ChildElement,
 	ComboElement,
 	Datum,
 	DonutElement,
+	IconElement,
 	LegendElement,
 	LineElement,
 	MarkChildElement,
@@ -109,18 +111,16 @@ export const sanitizeRscChartChildren = (children: unknown): ChartChildElement[]
 		.filter((child): child is ChartChildElement => chartChildDisplyNames.includes(getElementDisplayName(child)));
 };
 
-export const sanitizeBigNumberChildren = (
-	children: Children<BigNumberChildElement> | undefined,
-): BigNumberChildElement[] => {
-	const sanitizedChildren = toArray(children)
+export const sanitizeBigNumberChildren = (children: unknown): BigNumberChildElement[] => {
+	return toArray(children)
 		.flat()
-		.filter((child): child is BigNumberChildElement => isChartChildElement(child));
-	return sanitizedChildren.filter((c) => c.type == Line);
+		.filter((child): child is BigNumberChildElement => getElementDisplayName(child) === Line.displayName);
 };
 
-export const chartContainsBigNumber = (children: Children<ChartChildElement> | undefined): ChartChildElement[] => {
-	const sanitizedChildren = sanitizeRscChartChildren(children);
-	return sanitizedChildren.filter((child) => child.type == BigNumber);
+export const getBigNumberElementsFromChildren = (children: unknown): BigNumberElement[] => {
+	return toArray(children)
+		.flat()
+		.filter((child): child is BigNumberElement => getElementDisplayName(child) === BigNumber.displayName);
 };
 
 export const sanitizeMarkChildren = (children: unknown): MarkChildElement[] => {
@@ -147,7 +147,6 @@ export const sanitizeAxisChildren = (children: unknown): AxisChildElement[] => {
 		.filter((child): child is AxisChildElement => axisChildDisplayNames.includes(getElementDisplayName(child)));
 };
 
-
 export const sanitizeAxisAnnotationChildren = (children: ReactNode): AxisAnnotationChildElement[] => {
 	const axisAnnotationChildDisplayNames = [ChartTooltip.displayName, ChartPopover.displayName] as string[];
 
@@ -206,7 +205,7 @@ export function getElement(
 		| typeof ChartTooltip
 		| typeof Legend
 		| typeof Line
-		| typeof Scatter,
+		| typeof Scatter
 ): ChartElement | RscElement | undefined {
 	// if the element is undefined or 'type' doesn't exist on the element, stop searching
 	if (!element || typeof element !== 'object' || !('type' in element) || element.type === Fragment) {
@@ -287,7 +286,7 @@ export const getAllElements = (
 		| typeof Line
 		| typeof Scatter,
 	elements: MappedElement[] = [],
-	name: string = '',
+	name: string = ''
 ): MappedElement[] => {
 	if (
 		!target ||
@@ -392,7 +391,7 @@ const initElementCounts = (): ElementCounts => ({
  */
 export function debugLog(
 	debug: boolean | undefined,
-	{ title = '', contents }: { contents?: unknown; title?: string },
+	{ title = '', contents }: { contents?: unknown; title?: string }
 ): void {
 	if (debug) {
 		const rainbow = String.fromCodePoint(0x1f308);