feat(funnel): add valueFormatter prop and support for size and color overrides #2704
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| @@ -23,6 +23,7 @@ const InnerFunnel = <D extends FunnelDatum>({ | |||
| spacing = svgDefaultProps.spacing, | |||
| shapeBlending = svgDefaultProps.shapeBlending, | |||
| valueFormat, | |||
| valueFormatter, | |||
There was a problem hiding this comment.
I think this should be added to the documentation, we might also want to add a story about it, or to make it available via the playground.
| @@ -334,7 +336,8 @@ export const useFunnel = <D extends FunnelDatum>({ | |||
| const getBorderColor = useInheritedColor(borderColor, theme) | |||
| const getLabelColor = useInheritedColor(labelColor, theme) | |||
|
|
|||
| const formatValue = useValueFormatter<number>(valueFormat) | |||
| const _formatValue = useValueFormatter<number>(valueFormat) | |||
There was a problem hiding this comment.
useValueFormatter already uses the provided formatter if it's a function:
export const getValueFormatter = format => {
// user defined function
if (typeof format === 'function') return format
if (typeof format === 'string') {
// time format specifier
if (format.indexOf('time:') === 0) {
return d3TimeFormat(format.slice('5'))
}
// standard format specifier
return d3Format(format)
}
// no formatting
return value => `${value}`
}
| @@ -87,7 +93,7 @@ export interface FunnelCommonProps<D extends FunnelDatum> { | |||
| layers: (FunnelLayerId | FunnelCustomLayer<D>)[] | |||
|
|
|||
| valueFormat: ValueFormat<number> | |||
|
|
|||
| valueFormatter?: (value?: number) => string | |||
There was a problem hiding this comment.
You can probably use ValueFormat here.
| @@ -396,7 +405,7 @@ export const useFunnel = <D extends FunnelDatum>({ | |||
| data: datum, | |||
| width: partWidth, | |||
| height: partHeight, | |||
| color: getColor(datum), | |||
| color: datum.overrides?.color || getColor(datum), | |||
There was a problem hiding this comment.
getColor could be customized to pick a custom color defined on the datum. I think we could also add a test for this.
| @@ -9,6 +9,10 @@ export interface FunnelDatum { | |||
| id: string | number | |||
| value: number | |||
| label?: string | |||
| overrides?: { | |||
There was a problem hiding this comment.
While normalization is good, users often complained about having to format their data to match nivo's schema, maybe we could use a generic instead and allow users to pick the color (which is already supported) and size via a custom function.
| @@ -42,6 +46,8 @@ export interface FunnelPart<D extends FunnelDatum> extends BoxPosition { | |||
| borderOpacity: number | |||
| labelColor: string | |||
| formattedValue: number | string | |||
| tooltipName?: string | |||
Enhancements to the Funnel Component
I've introduced new props to allow for greater customization of the Funnel component:
Data Object Overrides:
color – Allows overriding the default color for a specific step.
size – A number between 1-100, defining the step's relative percentage size. This is useful when there's a large discrepancy between adjacent steps, preventing smaller steps from appearing too thin.
New Prop: valueFormatter
Added a valueFormatter prop to allow overriding the default value formatting behavior.
Let me know if you have any questions or suggestions! 🚀