diff --git a/packages/bullet/src/Bullet.tsx b/packages/bullet/src/Bullet.tsx index f993e32f8..5e2fc5ec1 100644 --- 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 index 37ffb9de0..3ef51ab0b 100644 --- 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( { showTooltipFromEvent( `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 index 8dadfa190..005f10c84 100644 --- 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 index 42cdc3e04..98f959add 100644 --- 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 + rangeBorderWidth: number rangeComponent: React.ComponentType rangeColors: Colors + measureBorderColor: InheritedColorConfig + measureBorderWidth: number measureComponent: React.ComponentType measureColors: Colors measureSize: number @@ -106,9 +111,11 @@ export type BulletRectsItemProps = Pick< Point & Dimensions & { animatedProps: SpringValues - index: number + borderColor: string + borderWidth: number color: string data: ComputedRangeDatum + index: number onMouseMove: BulletRectsProps['onMouseEnter'] } @@ -136,6 +143,8 @@ export type BulletRectsProps = Pick & measuresY: number transform: string }> + borderColor: InheritedColorConfig + borderWidth: number scale: ScaleLinear data: ComputedRangeDatum[] component: CommonBulletProps['rangeComponent'] diff --git a/packages/bullet/tests/Bullet.test.tsx b/packages/bullet/tests/Bullet.test.tsx index 0f68a8dbe..2bea26cd3 100644 --- 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 index dd539f832..92ea08849 100644 --- 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 index 9498b701c..c22661b83 100644 --- 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,