feat(bar): Add getColor to props provided to custom layers (#2651)

* Add colors and colorBy to common props to enable access to colors in a custom layer

* Pass getColor instead

* Fix type

Author: lemps

packages/bar/src/Bar.tsx

@@ -133,6 +133,7 @@ const InnerBar = <RawDatum extends BarDatum>({
         toggleSerie,
         legendsWithData,
         barTotals,
+        getColor,
     } = useBar<RawDatum>({
         indexBy,
         label,
@@ -409,6 +410,7 @@ const InnerBar = <RawDatum extends BarDatum>({
             onClick,
             onMouseEnter,
             onMouseLeave,
+            getColor,
         }),
         [
             commonProps,
@@ -427,6 +429,7 @@ const InnerBar = <RawDatum extends BarDatum>({
             onClick,
             onMouseEnter,
             onMouseLeave,
+            getColor,
         ]
     )
 

packages/bar/src/BarCanvas.tsx

@@ -218,6 +218,7 @@ const InnerBarCanvas = <RawDatum extends BarDatum>({
         shouldRenderBarLabel,
         legendsWithData,
         barTotals,
+        getColor,
     } = useBar<RawDatum>({
         indexBy,
         label,
@@ -292,6 +293,7 @@ const InnerBarCanvas = <RawDatum extends BarDatum>({
             onClick,
             onMouseEnter,
             onMouseLeave,
+            getColor,
         }),
         [
             borderRadius,
@@ -314,6 +316,7 @@ const InnerBarCanvas = <RawDatum extends BarDatum>({
             onClick,
             onMouseEnter,
             onMouseLeave,
+            getColor,
         ]
     )
 

packages/bar/src/types.ts

@@ -12,7 +12,7 @@ import {
     Theme,
     ValueFormat,
 } from '@nivo/core'
-import { InheritedColorConfig, OrdinalColorScaleConfig } from '@nivo/colors'
+import { InheritedColorConfig, OrdinalColorScale, OrdinalColorScaleConfig } from '@nivo/colors'
 import { LegendProps } from '@nivo/legends'
 import { AnyScale, ScaleSpec, ScaleBandSpec } from '@nivo/scales'
 import { SpringValues } from '@react-spring/web'
@@ -124,6 +124,7 @@ interface BarCustomLayerBaseProps<RawDatum>
 
     xScale: AnyScale
     yScale: AnyScale
+    getColor: OrdinalColorScale<ComputedDatum<RawDatum>>
 }
 
 export interface BarCustomLayerProps<RawDatum>