fix(xychart, annotation): optional dataKey, label styles (#1072)

* fix(xychart/BaseAnnotation): make dataKey optional * fix(annotation/Label): add fontFamily to sub/titleStyle
airbnb · Feb 18, 2021 · fb6ef2e · fb6ef2e
1 parent a8aa0ce
commit fb6ef2e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/packages/visx-annotation/src/components/Label.tsx b/packages/visx-annotation/src/components/Label.tsx
@@ -120,20 +120,24 @@ export default function Label({
     return { x: adjustedX, y: adjustedY };
   }, [propsX, x, dx, propsY, y, dy, horizontalAnchor, verticalAnchor, width, height]);
 
+  const titleFontFamily = titleProps?.fontFamily;
   const titleStyle = useMemo(
     () => ({
       fontSize: titleFontSize,
       fontWeight: titleFontWeight,
+      fontFamily: titleFontFamily,
     }),
-    [titleFontSize, titleFontWeight],
+    [titleFontSize, titleFontWeight, titleFontFamily],
   ) as React.CSSProperties;
 
+  const subtitleFontFamily = subtitleProps?.fontFamily;
   const subtitleStyle = useMemo(
     () => ({
       fontSize: subtitleFontSize,
       fontWeight: subtitleFontWeight,
+      fontFamily: subtitleFontFamily,
     }),
-    [subtitleFontSize, subtitleFontWeight],
+    [subtitleFontSize, subtitleFontWeight, subtitleFontFamily],
   ) as React.CSSProperties;
 
   const anchorLineOrientation = Math.abs(dx) > Math.abs(dy) ? 'vertical' : 'horizontal';
@@ -177,7 +181,6 @@ export default function Label({
       )}
       {title && (
         <Text
-          // @ts-ignore useMeasure expects HTML ref
           innerRef={titleRef}
           fill={fontColor}
           verticalAnchor="start"
@@ -193,7 +196,6 @@ export default function Label({
       )}
       {subtitle && (
         <Text
-          // @ts-ignore useMeasure expects HTML ref
           innerRef={subtitleRef}
           fill={fontColor}
           verticalAnchor="start"

diff --git a/packages/visx-xychart/src/components/annotation/private/BaseAnnotation.tsx b/packages/visx-xychart/src/components/annotation/private/BaseAnnotation.tsx
@@ -25,7 +25,7 @@ export type BaseAnnotationProps<
   /** Annotation component to render. */
   AnnotationComponent: React.FC<AnnotationProps> | React.FC<EditableAnnotationProps>;
   /** Key for series to which datum belongs (used for x/yAccessors). Alternatively xAccessor + yAccessor may be specified. */
-  dataKey: string;
+  dataKey?: string;
   /** Datum to annotate, used for Annotation positioning. */
   datum: Datum;
   /** If dataKey is not specified, you must specify an xAccessor for datum. */
@@ -63,7 +63,8 @@ export default function BaseAnnotation<
     return null;
   }
 
-  const registryEntry = propsXAccessor && propsYAccessor ? null : dataRegistry?.get(dataKey);
+  const registryEntry =
+    (propsXAccessor && propsYAccessor) || dataKey == null ? null : dataRegistry?.get(dataKey);
   const xAccessor = propsXAccessor || registryEntry?.xAccessor;
   const yAccessor = propsYAccessor || registryEntry?.yAccessor;