feat(annotations): add support for border radius to rect annotations

Author: plouc

packages/annotations/src/Annotation.tsx

@@ -30,6 +30,7 @@ export const Annotation = <Datum,>(annotation: BoundAnnotation<Datum>) => {
                     y={y}
                     width={annotation.width}
                     height={annotation.height}
+                    borderRadius={annotation.borderRadius}
                 />
             )}
             <AnnotationLink points={computed.points} />

packages/annotations/src/RectAnnotationOutline.tsx

@@ -6,11 +6,13 @@ export const RectAnnotationOutline = ({
     y,
     width,
     height,
+    borderRadius = 6,
 }: {
     x: number
     y: number
     width: number
     height: number
+    borderRadius?: number
 }) => {
     const theme = useTheme()
     const { animate, config: springConfig } = useMotionConfig()
@@ -30,6 +32,8 @@ export const RectAnnotationOutline = ({
                 <animated.rect
                     x={animatedProps.x}
                     y={animatedProps.y}
+                    rx={borderRadius}
+                    ry={borderRadius}
                     width={animatedProps.width}
                     height={animatedProps.height}
                     style={{
@@ -45,6 +49,8 @@ export const RectAnnotationOutline = ({
             <animated.rect
                 x={animatedProps.x}
                 y={animatedProps.y}
+                rx={borderRadius}
+                ry={borderRadius}
                 width={animatedProps.width}
                 height={animatedProps.height}
                 style={theme.annotations.outline}

packages/annotations/src/types.ts

@@ -107,6 +107,7 @@ export type RectAnnotationSpec<Datum> = BaseAnnotationSpec<Datum> & {
     offset?: number
 
     size?: never
+    borderRadius?: number
 }
 
 export type AnnotationSpec<Datum> =

website/src/data/components/network/props.ts

@@ -247,6 +247,7 @@ const props: ChartProperty[] = [
             noteY: 36,
             offset: 6,
             noteTextOffset: 5,
+            borderRadius: 3,
         },
     }),
     isInteractive({ flavors: allFlavors, defaultValue: defaults.isInteractive }),

website/src/lib/chart-properties/annotations.ts

@@ -72,6 +72,19 @@ export const annotations = ({
                         ],
                     },
                 },
+                {
+                    key: 'borderRadius',
+                    flavors,
+                    help: `Rect border radius.`,
+                    type: 'number',
+                    required: false,
+                    when: (settings: any) => settings.type === 'rect',
+                    control: {
+                        type: 'range',
+                        min: 0,
+                        max: 12,
+                    },
+                },
                 {
                     key: 'note',
                     flavors,