fix(bullet): add missing range/measure border color/width props (#1645)

plouc · Jun 30, 2021 · 2e5df09 · 2e5df09
1 parent 47e963a
commit 2e5df09
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 3 deletions.
diff --git a/packages/bullet/src/Bullet.tsx b/packages/bullet/src/Bullet.tsx
@@ -28,9 +28,13 @@ export const Bullet = (props: BulletSvgProps) => {
         titleOffsetY,
         titleRotation,
 
+        rangeBorderColor,
+        rangeBorderWidth,
         rangeComponent,
         rangeColors,
 
+        measureBorderColor,
+        measureBorderWidth,
         measureComponent,
         measureColors,
 
@@ -94,8 +98,12 @@ export const Bullet = (props: BulletSvgProps) => {
                         titleRotation={titleRotation}
                         measureHeight={measureHeight}
                         markerHeight={markerHeight}
+                        rangeBorderColor={rangeBorderColor}
+                        rangeBorderWidth={rangeBorderWidth}
                         rangeComponent={rangeComponent}
                         rangeColors={rangeColors}
+                        measureBorderColor={measureBorderColor}
+                        measureBorderWidth={measureBorderWidth}
                         measureComponent={measureComponent}
                         measureColors={measureColors}
                         markerComponent={markerComponent}

diff --git a/packages/bullet/src/BulletItem.tsx b/packages/bullet/src/BulletItem.tsx
@@ -28,10 +28,14 @@ export const BulletItem = ({
     titleOffsetY,
     titleRotation,
 
+    rangeBorderColor,
+    rangeBorderWidth,
     rangeComponent,
     rangeColors,
     ranges,
 
+    measureBorderColor,
+    measureBorderWidth,
     measureComponent,
     measureHeight,
     measureColors,
@@ -84,6 +88,8 @@ export const BulletItem = ({
             width={width}
             height={height}
             component={rangeComponent}
+            borderColor={rangeBorderColor}
+            borderWidth={rangeBorderWidth}
             onMouseEnter={(range, event) => {
                 showTooltipFromEvent(
                     <BasicTooltip
@@ -198,6 +204,8 @@ export const BulletItem = ({
                 width={width}
                 height={measureHeight}
                 component={measureComponent}
+                borderColor={measureBorderColor}
+                borderWidth={measureBorderWidth}
                 onMouseEnter={(measure, event) => {
                     showTooltipFromEvent(
                         <BasicTooltip

diff --git a/packages/bullet/src/BulletRects.tsx b/packages/bullet/src/BulletRects.tsx
@@ -1,15 +1,17 @@
 import { createElement, useMemo } from 'react'
 import { useTransition, animated, to } from '@react-spring/web'
-// @ts-ignore
-import { useMotionConfig } from '@nivo/core'
+import { useMotionConfig, useTheme } from '@nivo/core'
 import { computeRects } from './compute'
 import { BulletRectsProps, BulletRectComputedRect, BulletRectAnimatedProps } from './types'
+import { useInheritedColor } from '@nivo/colors'
 
 export const BulletRects = ({
     animatedProps,
     data,
     layout,
     y,
+    borderColor,
+    borderWidth,
     component,
     reverse,
     scale,
@@ -30,6 +32,9 @@ export const BulletRects = ({
         [data, layout, reverse, scale, height]
     )
 
+    const theme = useTheme()
+    const getBorderColor = useInheritedColor(borderColor, theme)
+
     const getTransform = (value: number) =>
         `translate(${layout === 'horizontal' ? 0 : value},${layout === 'horizontal' ? value : 0})`
 
@@ -66,6 +71,8 @@ export const BulletRects = ({
                     data: rect.data,
                     x: props.x.get(),
                     y: props.y.get(),
+                    borderColor: getBorderColor(rect.data),
+                    borderWidth,
                     width: to(props.width, value => Math.max(value, 0)).get(),
                     height: to(props.height, value => Math.max(value, 0)).get(),
                     color: props.color.get(),

diff --git a/packages/bullet/src/BulletRectsItem.tsx b/packages/bullet/src/BulletRectsItem.tsx
@@ -3,6 +3,8 @@ import { animated, to } from '@react-spring/web'
 
 export const BulletRectsItem = ({
     animatedProps: { x, y, width, height, color },
+    borderColor,
+    borderWidth,
     data,
     onMouseEnter,
     onMouseMove,
@@ -16,6 +18,8 @@ export const BulletRectsItem = ({
             width={to(width, value => Math.max(value, 0))}
             height={to(height, value => Math.max(value, 0))}
             fill={color}
+            strokeWidth={borderWidth}
+            stroke={borderColor}
             onMouseMove={event => onMouseMove(data, event)}
             onMouseEnter={event => onMouseEnter(data, event)}
             onMouseLeave={event => onMouseLeave(data, event)}

diff --git a/packages/bullet/src/types.ts b/packages/bullet/src/types.ts
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { Box, Dimensions, Theme, Colors, ModernMotionProps } from '@nivo/core'
+import { InheritedColorConfig } from '@nivo/colors'
 import { ScaleLinear } from '@nivo/scales'
 import { SpringValues } from '@react-spring/web'
 
@@ -56,9 +57,13 @@ export type CommonBulletProps = Dimensions & {
     titleOffsetY: number
     titleRotation: number
 
+    rangeBorderColor: InheritedColorConfig<ComputedRangeDatum>
+    rangeBorderWidth: number
     rangeComponent: React.ComponentType<BulletRectsItemProps>
     rangeColors: Colors
 
+    measureBorderColor: InheritedColorConfig<ComputedRangeDatum>
+    measureBorderWidth: number
     measureComponent: React.ComponentType<BulletRectsItemProps>
     measureColors: Colors
     measureSize: number
@@ -106,9 +111,11 @@ export type BulletRectsItemProps = Pick<
     Point &
     Dimensions & {
         animatedProps: SpringValues<BulletRectAnimatedProps>
-        index: number
+        borderColor: string
+        borderWidth: number
         color: string
         data: ComputedRangeDatum
+        index: number
         onMouseMove: BulletRectsProps['onMouseEnter']
     }
 
@@ -136,6 +143,8 @@ export type BulletRectsProps = Pick<CommonBulletProps, 'layout' | 'reverse'> &
             measuresY: number
             transform: string
         }>
+        borderColor: InheritedColorConfig<ComputedRangeDatum>
+        borderWidth: number
         scale: ScaleLinear<number>
         data: ComputedRangeDatum[]
         component: CommonBulletProps['rangeComponent']

diff --git a/packages/bullet/tests/Bullet.test.tsx b/packages/bullet/tests/Bullet.test.tsx
@@ -360,6 +360,8 @@ describe('Bullet', () => {
 
             expect(props).toMatchInlineSnapshot(`
                 Object {
+                  "borderColor": "rgb(65, 125, 224)",
+                  "borderWidth": 0,
                   "color": "rgba(65, 125, 224, 1)",
                   "data": Object {
                     "color": "rgb(65, 125, 224)",
@@ -397,6 +399,8 @@ describe('Bullet', () => {
 
             expect(props).toMatchInlineSnapshot(`
                 Object {
+                  "borderColor": "rgb(173, 10, 129)",
+                  "borderWidth": 0,
                   "color": "rgba(173, 10, 129, 1)",
                   "data": Object {
                     "color": "rgb(173, 10, 129)",

diff --git a/website/src/data/components/bullet/props.js b/website/src/data/components/bullet/props.js
@@ -187,6 +187,30 @@ const props = [
         },
     },
     themeProperty,
+    {
+        key: 'rangeBorderColor',
+        flavors: ['svg'],
+        group: 'Style',
+        help: 'Method to compute range border color.',
+        description: `
+            how to compute range border color,
+            [see dedicated documentation](self:/guides/colors).
+        `,
+        type: 'string | object | Function',
+        controlType: 'inheritedColor',
+        required: false,
+        defaultValue: defaultProps.rangeBorderColor,
+    },
+    {
+        key: 'rangeBorderWidth',
+        flavors: ['svg'],
+        group: 'Style',
+        help: 'Width of range border.',
+        type: 'number',
+        controlType: 'lineWidth',
+        required: false,
+        defaultValue: defaultProps.rangeBorderWidth,
+    },
     {
         key: 'rangeComponent',
         flavors: ['svg'],
@@ -212,6 +236,30 @@ const props = [
             includeSequential: true,
         },
     },
+    {
+        key: 'measureBorderColor',
+        flavors: ['svg'],
+        group: 'Style',
+        help: 'Method to compute measure border color.',
+        description: `
+            how to compute measure border color,
+            [see dedicated documentation](self:/guides/colors).
+        `,
+        type: 'string | object | Function',
+        controlType: 'inheritedColor',
+        required: false,
+        defaultValue: defaultProps.measureBorderColor,
+    },
+    {
+        key: 'measureBorderWidth',
+        flavors: ['svg'],
+        group: 'Style',
+        help: 'Width of measure border.',
+        type: 'number',
+        controlType: 'lineWidth',
+        required: false,
+        defaultValue: defaultProps.measureBorderWidth,
+    },
     {
         key: 'measureComponent',
         flavors: ['svg'],

diff --git a/website/src/pages/bullet/index.js b/website/src/pages/bullet/index.js
@@ -39,6 +39,10 @@ const initialProperties = {
     titleOffsetX: -70,
     titleOffsetY: defaultProps.titleOffsetY,
     titleRotation: defaultProps.titleRotation,
+    rangeBorderColor: defaultProps.rangeBorderColor,
+    rangeBorderWidth: defaultProps.rangeBorderWidth,
+    measureBorderColor: defaultProps.measureBorderColor,
+    measureBorderWidth: defaultProps.measureBorderWidth,
     measureSize: 0.2,
     markerSize: 0.6,
     axisPosition: defaultProps.axisPosition,