fix(annotation/Label): fix doc types and padding (#989)

* fix(annotation/Label): fix doc types, add default anchorLineStroke, fix object padding * fix(demo/annotation): update position on scale changes
airbnb · Jan 11, 2021 · d6db693 · d6db693
1 parent bb4431e
commit d6db693
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/packages/visx-annotation/src/components/Label.tsx b/packages/visx-annotation/src/components/Label.tsx
@@ -61,11 +61,11 @@ function getCompletePadding(padding: LabelProps['backgroundPadding']) {
   if (typeof padding === 'number') {
     return { top: padding, right: padding, bottom: padding, left: padding };
   }
-  return { ...DEFAULT_PADDING, padding };
+  return { ...DEFAULT_PADDING, ...padding };
 }
 
-export default function AnnotationLabel({
-  anchorLineStroke,
+export default function Label({
+  anchorLineStroke = '#222',
   backgroundFill = '#eaeaea',
   backgroundPadding,
   backgroundProps,

diff --git a/packages/visx-demo/src/sandboxes/visx-annotation/ExampleControls.tsx b/packages/visx-demo/src/sandboxes/visx-annotation/ExampleControls.tsx
@@ -1,5 +1,5 @@
 /* eslint jsx-a11y/label-has-associated-control: 'off', @typescript-eslint/no-explicit-any: 'off' */
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import appleStock, { AppleStock } from '@visx/mock-data/lib/mocks/appleStock';
 import { PickD3Scale, scaleTime, scaleLinear } from '@visx/scale';
 import { extent } from 'd3-array';
@@ -86,6 +86,14 @@ export default function ExampleControls({
     dx: compact ? -50 : -100,
     dy: compact ? -30 : -50,
   });
+  // update annotation position when scale's change
+  useEffect(() => {
+    setAnnotationPosition(currPosition => ({
+      ...currPosition,
+      x: xScale(getDate(annotateDatum)) ?? 0,
+      y: yScale(getStockValue(annotateDatum)) ?? 0,
+    }));
+  }, [xScale, yScale]);
 
   return (
     <>