Merge pull request #600 from SantiagoG14/capstone/new-design

Capstone/venn spec builder & react component v2

Author: marshallpete

.eslintrc.cjs

@@ -44,6 +44,7 @@ module.exports = {
         message: 'Please use relative path import for types instead (ex. ../types/locales).',
       },
     ],
+    'no-duplicate-imports': 'error',
     'header/header': [
       2,
       'block',

packages/constants/constants.ts

@@ -106,6 +106,13 @@ export const DONUT_SUMMARY_FONT_SIZE_RATIO = 0.35;
 /** Min inner radius to display the summary metric. If the inner radius is less than this, the summary metric is hidden. */
 export const DONUT_SUMMARY_MIN_RADIUS = 45;
 
+// venn constant
+export const DEFAULT_VENN_COLOR = 'sets';
+/** default key in data for the metric in the venn diagram */
+export const DEFAULT_VENN_METRIC = 'size';
+/** default key in data for the label inside the venn*/
+export const DEFAULT_VENN_LABEL = 'label';
+
 // ratio that each opacity is divded by when hovering or highlighting from legend
 export const HIGHLIGHT_CONTRAST_RATIO = 5;
 

packages/react-spectrum-charts/src/Chart.tsx

@@ -26,7 +26,7 @@ import {
   MARK_ID,
 } from '@spectrum-charts/constants';
 import { getColorValue } from '@spectrum-charts/themes';
-import { ChartHandle, LineType, LineWidth } from '@spectrum-charts/vega-spec-builder';
+import { ChartData, ChartHandle, LineType, LineWidth } from '@spectrum-charts/vega-spec-builder';
 
 import './Chart.css';
 import { RscChart } from './RscChart';
@@ -38,7 +38,7 @@ import useChartImperativeHandle from './hooks/useChartImperativeHandle';
 import useChartWidth from './hooks/useChartWidth';
 import { useResizeObserver } from './hooks/useResizeObserver';
 import { BigNumberInternal } from './rc/components/BigNumber/BigNumber';
-import { ChartData, ChartProps, RscChartProps } from './types';
+import { ChartProps, RscChartProps } from './types';
 import { getBigNumberElementsFromChildren, toArray } from './utils';
 
 interface PlaceholderContentProps {

packages/react-spectrum-charts/src/RscChart.tsx

@@ -69,6 +69,8 @@ export const RscChart = forwardRef<ChartHandle, RscChartProps>((props, forwarded
     backgroundColor,
     children: sanitizedChildren,
     colors,
+    chartWidth,
+    chartHeight,
     data,
     description,
     idKey,

packages/react-spectrum-charts/src/VegaChart.tsx

@@ -17,11 +17,11 @@ import { Options as TooltipOptions } from 'vega-tooltip';
 
 import { TABLE } from '@spectrum-charts/constants';
 import { getLocale } from '@spectrum-charts/locales';
-import { getVegaEmbedOptions } from '@spectrum-charts/vega-spec-builder';
+import { ChartData, getVegaEmbedOptions } from '@spectrum-charts/vega-spec-builder';
 
 import { useDebugSpec } from './hooks/useDebugSpec';
 import { extractValues, isVegaData } from './hooks/useSpec';
-import { ChartData, ChartProps } from './types';
+import { ChartProps } from './types';
 
 export interface VegaChartProps {
   config: Config;

packages/react-spectrum-charts/src/alpha/components/Venn/Venn.tsx

@@ -0,0 +1,31 @@
+/*
+ * Copyright 2025 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.
+ */
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { FC } from 'react';
+
+import { DEFAULT_VENN_COLOR, DEFAULT_VENN_LABEL, DEFAULT_VENN_METRIC } from '@spectrum-charts/constants';
+
+import { VennProps } from '../../../types';
+
+const Venn: FC<VennProps> = ({
+  orientation = '0deg',
+  metric = DEFAULT_VENN_METRIC,
+  label = DEFAULT_VENN_LABEL,
+  color = DEFAULT_VENN_COLOR,
+}) => {
+  return null;
+};
+
+Venn.displayName = 'Venn';
+
+export { Venn };

packages/react-spectrum-charts/src/alpha/components/Venn/index.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright 2025 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.
+ */
+
+export * from './Venn';

packages/react-spectrum-charts/src/alpha/components/index.ts

@@ -12,3 +12,4 @@
 
 export * from './Bullet';
 export * from './Combo';
+export * from './Venn';

packages/react-spectrum-charts/src/hooks/useSpec.tsx

@@ -9,18 +9,22 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import { useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 
 import { Data, Spec, ValuesData } from 'vega';
 
 import { getColorValue } from '@spectrum-charts/themes';
-import { ChartSpecOptions, baseData, buildSpec } from '@spectrum-charts/vega-spec-builder';
+import { ChartData, ChartSpecOptions, baseData, buildSpec } from '@spectrum-charts/vega-spec-builder';
 
+import { Venn } from '../alpha';
 import { rscPropsToSpecBuilderOptions } from '../rscToSbAdapter';
-import { ChartData, SanitizedSpecProps } from '../types';
+import { SanitizedSpecProps } from '../types';
+import { chartHasChild } from '../utils';
 
 export default function useSpec({
   backgroundColor,
+  chartHeight,
+  chartWidth,
   children,
   colors,
   colorScheme,
@@ -38,7 +42,38 @@ export default function useSpec({
   title,
   UNSAFE_vegaSpec,
 }: SanitizedSpecProps): Spec {
+  const prevSpec = useRef<Spec | null>(null);
+  const hasVenn = useMemo(() => chartHasChild({ children, displayName: Venn.displayName as string }), [children]);
+
+  // invalidate cache if changes to props other than width, height change
+  useEffect(() => {
+    prevSpec.current = null;
+  }, [
+    UNSAFE_vegaSpec,
+    backgroundColor,
+    children,
+    colors,
+    colorScheme,
+    description,
+    hiddenSeries,
+    highlightedItem,
+    highlightedSeries,
+    idKey,
+    lineTypes,
+    lineWidths,
+    opacities,
+    symbolShapes,
+    symbolSizes,
+    title,
+    data,
+  ]);
+
   return useMemo(() => {
+    // returned cached spec if there is a cached spec and if venn is not a child element
+    if (!hasVenn && prevSpec.current !== null) {
+      return prevSpec.current;
+    }
+
     // They already supplied a spec, fill it in with defaults
     if (UNSAFE_vegaSpec) {
       const vegaSpecWithDefaults = initializeSpec(UNSAFE_vegaSpec, {
@@ -50,15 +85,20 @@ export default function useSpec({
       });
 
       // copy the spec so we don't mutate the original
-      return JSON.parse(JSON.stringify(vegaSpecWithDefaults));
+      const spec = JSON.parse(JSON.stringify(vegaSpecWithDefaults));
+      prevSpec.current = spec;
+      return spec;
     }
 
     // or we need to build their spec
     const chartOptions = rscPropsToSpecBuilderOptions({
       backgroundColor,
+      chartHeight,
+      chartWidth,
       children,
       colors,
       colorScheme,
+      data,
       description,
       hiddenSeries,
       highlightedItem,
@@ -73,7 +113,10 @@ export default function useSpec({
     });
 
     // stringify-parse so that all immer stuff gets cleared out
-    return buildSpec(chartOptions);
+    const spec = buildSpec(chartOptions);
+    prevSpec.current = spec;
+
+    return spec;
   }, [
     UNSAFE_vegaSpec,
     backgroundColor,
@@ -92,6 +135,9 @@ export default function useSpec({
     symbolSizes,
     title,
     data,
+    chartHeight,
+    chartWidth,
+    hasVenn,
   ]);
 }
 

packages/react-spectrum-charts/src/rc/components/BigNumber/BigNumber.tsx

@@ -13,11 +13,11 @@ import { CSSProperties, FC, cloneElement } from 'react';
 
 import { Flex, FlexProps, IconProps } from '@adobe/react-spectrum';
 import { getLocale } from '@spectrum-charts/locales';
-import { BigNumberMethod, Orientation } from '@spectrum-charts/vega-spec-builder';
+import { BigNumberMethod, ChartData, Orientation } from '@spectrum-charts/vega-spec-builder';
 
 import { RscChart } from '../../../RscChart';
 import { Line } from '../../../components';
-import { BigNumberProps, ChartData, LineProps, RscChartProps } from '../../../types';
+import { BigNumberProps, LineProps, RscChartProps } from '../../../types';
 import { sanitizeBigNumberChildren } from '../../../utils';
 import './BigNumber.css';
 import { formatBigNumber } from './bigNumberFormatUtils';