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
plouc · Oct 24, 2024 · 7ed3ae0 · 7ed3ae0
1 parent 1ce58a5
commit 7ed3ae0
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/packages/bar/src/Bar.tsx b/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,
         ]
     )
 

diff --git a/packages/bar/src/BarCanvas.tsx b/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,
         ]
     )
 

diff --git a/packages/bar/src/types.ts b/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>