From e3ce7036c374fc73619533f75dbacf0bcec5764d Mon Sep 17 00:00:00 2001
From: plouc <benitteraphael@gmail.com>
Date: Sat, 24 May 2025 07:40:06 +0900
Subject: [PATCH 1/4] feat(bar): always use a default for the datum type and
 add introduce generic type for the index value

---
 packages/bar/src/Bar.tsx                 |  27 +--
 packages/bar/src/BarAnnotations.tsx      |   6 +-
 packages/bar/src/BarCanvas.tsx           |  37 ++--
 packages/bar/src/BarItem.tsx             |   6 +-
 packages/bar/src/BarTooltip.tsx          |   8 +-
 packages/bar/src/BarTotals.tsx           |  10 +-
 packages/bar/src/ResponsiveBar.tsx       |  14 +-
 packages/bar/src/ResponsiveBarCanvas.tsx |  12 +-
 packages/bar/src/defaults.ts             |  46 +++--
 packages/bar/src/hooks.ts                |   5 +-
 packages/bar/src/renderBar.ts            |   6 +-
 packages/bar/src/types.ts                | 233 +++++++++++++----------
 12 files changed, 231 insertions(+), 179 deletions(-)

diff --git a/packages/bar/src/Bar.tsx b/packages/bar/src/Bar.tsx
index f7bec8c42..111ef2bf5 100644
--- a/packages/bar/src/Bar.tsx
+++ b/packages/bar/src/Bar.tsx
@@ -20,6 +20,7 @@ import {
     BarComponent,
     BarCustomLayerProps,
     BarDatum,
+    BarIndex,
     BarItemProps,
     BarLayerId,
     BarSvgProps,
@@ -29,12 +30,12 @@ import {
 import { BarTotals } from './BarTotals'
 import { useComputeLabelLayout } from './compute/common'
 
-type InnerBarProps<D extends BarDatum> = Omit<
-    BarSvgProps<D>,
+type InnerBarProps<D extends BarDatum = BarDatum, I extends BarIndex = string> = Omit<
+    BarSvgProps<D, I>,
     'animate' | 'motionConfig' | 'renderWrapper' | 'theme'
 >
 
-const InnerBar = <D extends BarDatum>({
+const InnerBar = <D extends BarDatum = BarDatum, I extends BarIndex = string>({
     data,
     indexBy,
     keys,
@@ -56,7 +57,7 @@ const InnerBar = <D extends BarDatum>({
     gridXValues,
     gridYValues,
     layers = svgDefaultProps.layers as BarLayerId[],
-    barComponent = svgDefaultProps.barComponent as unknown as BarComponent<D>,
+    barComponent = svgDefaultProps.barComponent as unknown as BarComponent<D, I>,
     enableLabel = svgDefaultProps.enableLabel,
     label,
     labelSkipWidth = svgDefaultProps.labelSkipWidth,
@@ -77,7 +78,7 @@ const InnerBar = <D extends BarDatum>({
     tooltipLabel,
     valueFormat,
     isInteractive = svgDefaultProps.isInteractive,
-    tooltip = svgDefaultProps.tooltip as BarTooltipComponent<D>,
+    tooltip = svgDefaultProps.tooltip as BarTooltipComponent<D, I>,
     onClick,
     onMouseEnter,
     onMouseLeave,
@@ -96,7 +97,7 @@ const InnerBar = <D extends BarDatum>({
     enableTotals = svgDefaultProps.enableTotals,
     totalsOffset = svgDefaultProps.totalsOffset,
     forwardedRef,
-}: InnerBarProps<D> & {
+}: InnerBarProps<D, I> & {
     forwardedRef: Ref<SVGSVGElement>
 }) => {
     const { animate, config: springConfig } = useMotionConfig()
@@ -120,7 +121,7 @@ const InnerBar = <D extends BarDatum>({
         legendsWithData,
         barTotals,
         getColor,
-    } = useBar<D>({
+    } = useBar<D, I>({
         indexBy,
         label,
         tooltipLabel,
@@ -380,7 +381,7 @@ const InnerBar = <D extends BarDatum>({
         )
     }
 
-    const layerContext: BarCustomLayerProps<D> = {
+    const layerContext: BarCustomLayerProps<D, I> = {
         ...commonProps,
         margin,
         width,
@@ -425,7 +426,7 @@ const InnerBar = <D extends BarDatum>({
 }
 
 export const Bar = forwardRef(
-    <D extends BarDatum>(
+    <D extends BarDatum = BarDatum, I extends BarIndex = string>(
         {
             isInteractive = svgDefaultProps.isInteractive,
             animate = svgDefaultProps.animate,
@@ -433,7 +434,7 @@ export const Bar = forwardRef(
             theme,
             renderWrapper,
             ...props
-        }: BarSvgProps<D>,
+        }: BarSvgProps<D, I>,
         ref: Ref<SVGSVGElement>
     ) => (
         <Container
@@ -443,7 +444,9 @@ export const Bar = forwardRef(
             renderWrapper={renderWrapper}
             theme={theme}
         >
-            <InnerBar<D> {...props} isInteractive={isInteractive} forwardedRef={ref} />
+            <InnerBar<D, I> {...props} isInteractive={isInteractive} forwardedRef={ref} />
         </Container>
     )
-) as <D extends BarDatum>(props: WithChartRef<BarSvgProps<D>, SVGSVGElement>) => ReactElement
+) as <D extends BarDatum = BarDatum, I extends BarIndex = string>(
+    props: WithChartRef<BarSvgProps<D, I>, SVGSVGElement>
+) => ReactElement
diff --git a/packages/bar/src/BarAnnotations.tsx b/packages/bar/src/BarAnnotations.tsx
index 49f9882bf..350ad4ed6 100644
--- a/packages/bar/src/BarAnnotations.tsx
+++ b/packages/bar/src/BarAnnotations.tsx
@@ -1,10 +1,10 @@
 import { Annotation, useAnnotations } from '@nivo/annotations'
-import { BarAnnotationsProps, BarDatum } from './types'
+import { BarAnnotationsProps, BarDatum, BarIndex } from './types'
 
-export const BarAnnotations = <D extends BarDatum>({
+export const BarAnnotations = <D extends BarDatum = BarDatum, I extends BarIndex = string>({
     bars,
     annotations,
-}: BarAnnotationsProps<D>) => {
+}: BarAnnotationsProps<D, I>) => {
     const boundAnnotations = useAnnotations({
         data: bars,
         annotations,
diff --git a/packages/bar/src/BarCanvas.tsx b/packages/bar/src/BarCanvas.tsx
index 85309a357..0033eb65e 100644
--- a/packages/bar/src/BarCanvas.tsx
+++ b/packages/bar/src/BarCanvas.tsx
@@ -36,6 +36,7 @@ import {
     BarCanvasRenderer,
     BarCommonProps,
     BarDatum,
+    BarIndex,
     BarTooltipComponent,
     ComputedBarDatum,
 } from './types'
@@ -43,8 +44,8 @@ import { useBar } from './hooks'
 import { BarTotalsData } from './compute/totals'
 import { useComputeLabelLayout } from './compute/common'
 
-const findBarUnderCursor = <D extends BarDatum>(
-    nodes: ComputedBarDatum<D>[],
+const findBarUnderCursor = <D extends BarDatum = BarDatum, I extends BarIndex = string>(
+    nodes: readonly ComputedBarDatum<D, I>[],
     margin: Margin,
     x: number,
     y: number
@@ -55,11 +56,11 @@ const findBarUnderCursor = <D extends BarDatum>(
 
 const isNumber = (value: unknown): value is number => typeof value === 'number'
 
-function renderTotalsToCanvas<D extends BarDatum>(
+function renderTotalsToCanvas<D extends BarDatum = BarDatum, I extends BarIndex = string>(
     ctx: CanvasRenderingContext2D,
-    barTotals: BarTotalsData[],
+    barTotals: readonly BarTotalsData[],
     theme: Theme,
-    layout: BarCommonProps<D>['layout'] = canvasDefaultProps.layout
+    layout: BarCommonProps<D, I>['layout'] = canvasDefaultProps.layout
 ) {
     setCanvasFont(ctx, theme.labels.text)
     ctx.textBaseline = layout === 'vertical' ? 'alphabetic' : 'middle'
@@ -70,14 +71,14 @@ function renderTotalsToCanvas<D extends BarDatum>(
     })
 }
 
-type InnerBarCanvasProps<RawDatum extends BarDatum> = Omit<
-    BarCanvasProps<RawDatum>,
+type InnerBarCanvasProps<D extends BarDatum, I extends BarIndex = string> = Omit<
+    BarCanvasProps<D, I>,
     'renderWrapper' | 'theme'
 > & {
     forwardedRef: Ref<HTMLCanvasElement>
 }
 
-const InnerBarCanvas = <D extends BarDatum>({
+const InnerBarCanvas = <D extends BarDatum = BarDatum, I extends BarIndex = string>({
     data,
     indexBy,
     keys,
@@ -100,8 +101,8 @@ const InnerBarCanvas = <D extends BarDatum>({
     gridYValues,
     labelPosition = canvasDefaultProps.labelPosition,
     labelOffset = canvasDefaultProps.labelOffset,
-    layers = canvasDefaultProps.layers as BarCanvasLayer<D>[],
-    renderBar = canvasDefaultProps.renderBar as unknown as BarCanvasRenderer<D>,
+    layers = canvasDefaultProps.layers as BarCanvasLayer<D, I>[],
+    renderBar = canvasDefaultProps.renderBar as unknown as BarCanvasRenderer<D, I>,
     enableLabel = canvasDefaultProps.enableLabel,
     label,
     labelSkipWidth = canvasDefaultProps.labelSkipWidth,
@@ -117,7 +118,7 @@ const InnerBarCanvas = <D extends BarDatum>({
     tooltipLabel,
     valueFormat,
     isInteractive = canvasDefaultProps.isInteractive,
-    tooltip = canvasDefaultProps.tooltip as BarTooltipComponent<D>,
+    tooltip = canvasDefaultProps.tooltip as BarTooltipComponent<D, I>,
     onClick,
     onMouseEnter,
     onMouseLeave,
@@ -127,7 +128,7 @@ const InnerBarCanvas = <D extends BarDatum>({
     forwardedRef,
     enableTotals = canvasDefaultProps.enableTotals,
     totalsOffset = canvasDefaultProps.totalsOffset,
-}: InnerBarCanvasProps<D>) => {
+}: InnerBarCanvasProps<D, I>) => {
     const canvasEl = useRef<HTMLCanvasElement | null>(null)
 
     const theme = useTheme()
@@ -150,7 +151,7 @@ const InnerBarCanvas = <D extends BarDatum>({
         legendsWithData,
         barTotals,
         getColor,
-    } = useBar<D>({
+    } = useBar<D, I>({
         indexBy,
         label,
         tooltipLabel,
@@ -468,8 +469,8 @@ const InnerBarCanvas = <D extends BarDatum>({
 }
 
 export const BarCanvas = forwardRef(
-    <RawDatum extends BarDatum>(
-        { isInteractive, renderWrapper, theme, ...props }: BarCanvasProps<RawDatum>,
+    <D extends BarDatum = BarDatum, I extends BarIndex = string>(
+        { isInteractive, renderWrapper, theme, ...props }: BarCanvasProps<D, I>,
         ref: Ref<HTMLCanvasElement>
     ) => (
         <Container
@@ -478,9 +479,9 @@ export const BarCanvas = forwardRef(
             theme={theme}
             animate={false}
         >
-            <InnerBarCanvas<RawDatum> {...props} isInteractive={isInteractive} forwardedRef={ref} />
+            <InnerBarCanvas<D, I> {...props} isInteractive={isInteractive} forwardedRef={ref} />
         </Container>
     )
-) as <RawDatum extends BarDatum>(
-    props: WithChartRef<BarCanvasProps<RawDatum>, HTMLCanvasElement>
+) as <D extends BarDatum = BarDatum, I extends BarIndex = string>(
+    props: WithChartRef<BarCanvasProps<D, I>, HTMLCanvasElement>
 ) => ReactElement
diff --git a/packages/bar/src/BarItem.tsx b/packages/bar/src/BarItem.tsx
index 02d88f1e3..fe4e8619b 100644
--- a/packages/bar/src/BarItem.tsx
+++ b/packages/bar/src/BarItem.tsx
@@ -3,9 +3,9 @@ import { animated, to } from '@react-spring/web'
 import { useTheme } from '@nivo/theming'
 import { useTooltip } from '@nivo/tooltip'
 import { Text } from '@nivo/text'
-import { BarDatum, BarItemProps } from './types'
+import { BarDatum, BarIndex, BarItemProps } from './types'
 
-export const BarItem = <D extends BarDatum>({
+export const BarItem = <D extends BarDatum = BarDatum, I extends BarIndex = string>({
     bar: { data, ...bar },
     style: {
         borderColor,
@@ -34,7 +34,7 @@ export const BarItem = <D extends BarDatum>({
     ariaDescribedBy,
     ariaDisabled,
     ariaHidden,
-}: BarItemProps<D>) => {
+}: BarItemProps<D, I>) => {
     const theme = useTheme()
     const { showTooltipFromEvent, showTooltipAt, hideTooltip } = useTooltip()
 
diff --git a/packages/bar/src/BarTooltip.tsx b/packages/bar/src/BarTooltip.tsx
index a983ce42c..aa45143ff 100644
--- a/packages/bar/src/BarTooltip.tsx
+++ b/packages/bar/src/BarTooltip.tsx
@@ -1,6 +1,10 @@
 import { BasicTooltip } from '@nivo/tooltip'
-import { BarDatum, BarTooltipProps } from './types'
+import { BarDatum, BarIndex, BarTooltipProps } from './types'
 
-export const BarTooltip = <D extends BarDatum>({ color, label, ...data }: BarTooltipProps<D>) => {
+export const BarTooltip = <D extends BarDatum = BarDatum, I extends BarIndex = string>({
+    color,
+    label,
+    ...data
+}: BarTooltipProps<D, I>) => {
     return <BasicTooltip id={label} value={data.formattedValue} enableChip={true} color={color} />
 }
diff --git a/packages/bar/src/BarTotals.tsx b/packages/bar/src/BarTotals.tsx
index 5efa9d610..c1738c5ef 100644
--- a/packages/bar/src/BarTotals.tsx
+++ b/packages/bar/src/BarTotals.tsx
@@ -1,22 +1,22 @@
 import { useTheme } from '@nivo/theming'
 import { AnimationConfig, animated, useTransition } from '@react-spring/web'
-import { BarCommonProps, BarDatum } from './types'
+import { BarCommonProps, BarDatum, BarIndex } from './types'
 import { svgDefaultProps } from './defaults'
 import { BarTotalsData } from './compute/totals'
 
-interface Props<RawDatum extends BarDatum> {
+interface Props<D extends BarDatum = BarDatum, I extends BarIndex = string> {
     data: BarTotalsData[]
     springConfig: Partial<AnimationConfig>
     animate: boolean
-    layout?: BarCommonProps<RawDatum>['layout']
+    layout?: BarCommonProps<D, I>['layout']
 }
 
-export const BarTotals = <RawDatum extends BarDatum>({
+export const BarTotals = <D extends BarDatum = BarDatum, I extends BarIndex = string>({
     data,
     springConfig,
     animate,
     layout = svgDefaultProps.layout,
-}: Props<RawDatum>) => {
+}: Props<D, I>) => {
     const theme = useTheme()
     const totalsTransition = useTransition<
         BarTotalsData,
diff --git a/packages/bar/src/ResponsiveBar.tsx b/packages/bar/src/ResponsiveBar.tsx
index 92dbd795d..3584245df 100644
--- a/packages/bar/src/ResponsiveBar.tsx
+++ b/packages/bar/src/ResponsiveBar.tsx
@@ -1,17 +1,17 @@
 import { forwardRef, Ref, ReactElement } from 'react'
 import { ResponsiveWrapper } from '@nivo/core'
 import { Bar } from './Bar'
-import { BarDatum, ResponsiveBarSvgProps } from './types'
+import { BarDatum, BarIndex, ResponsiveBarSvgProps } from './types'
 
 export const ResponsiveBar = forwardRef(
-    <D extends BarDatum>(
+    <D extends BarDatum = BarDatum, I extends BarIndex = string>(
         {
             defaultWidth,
             defaultHeight,
             onResize,
             debounceResize,
             ...props
-        }: Omit<ResponsiveBarSvgProps<D>, 'ref'>,
+        }: Omit<ResponsiveBarSvgProps<D, I>, 'ref'>,
         ref: Ref<SVGSVGElement>
     ) => (
         <ResponsiveWrapper
@@ -20,7 +20,11 @@ export const ResponsiveBar = forwardRef(
             onResize={onResize}
             debounceResize={debounceResize}
         >
-            {({ width, height }) => <Bar<D> {...props} width={width} height={height} ref={ref} />}
+            {({ width, height }) => (
+                <Bar<D, I> {...props} width={width} height={height} ref={ref} />
+            )}
         </ResponsiveWrapper>
     )
-) as <D extends BarDatum>(props: ResponsiveBarSvgProps<D>) => ReactElement
+) as <D extends BarDatum = BarDatum, I extends BarIndex = string>(
+    props: ResponsiveBarSvgProps<D, I>
+) => ReactElement
diff --git a/packages/bar/src/ResponsiveBarCanvas.tsx b/packages/bar/src/ResponsiveBarCanvas.tsx
index 1e7b92400..b26a7a7c2 100644
--- a/packages/bar/src/ResponsiveBarCanvas.tsx
+++ b/packages/bar/src/ResponsiveBarCanvas.tsx
@@ -1,17 +1,17 @@
 import { ForwardedRef, forwardRef, ReactElement } from 'react'
 import { ResponsiveWrapper } from '@nivo/core'
-import { BarDatum, ResponsiveBarCanvasProps } from './types'
+import { BarDatum, BarIndex, ResponsiveBarCanvasProps } from './types'
 import { BarCanvas } from './BarCanvas'
 
 export const ResponsiveBarCanvas = forwardRef(
-    <D extends BarDatum>(
+    <D extends BarDatum = BarDatum, I extends BarIndex = string>(
         {
             defaultWidth,
             defaultHeight,
             onResize,
             debounceResize,
             ...props
-        }: Omit<ResponsiveBarCanvasProps<D>, 'ref'>,
+        }: Omit<ResponsiveBarCanvasProps<D, I>, 'ref'>,
         ref: ForwardedRef<HTMLCanvasElement>
     ) => (
         <ResponsiveWrapper
@@ -21,8 +21,10 @@ export const ResponsiveBarCanvas = forwardRef(
             debounceResize={debounceResize}
         >
             {({ width, height }) => (
-                <BarCanvas<D> {...props} width={width} height={height} ref={ref} />
+                <BarCanvas<D, I> {...props} width={width} height={height} ref={ref} />
             )}
         </ResponsiveWrapper>
     )
-) as <D extends BarDatum>(props: ResponsiveBarCanvasProps<D>) => ReactElement
+) as <D extends BarDatum = BarDatum, I extends BarIndex = string>(
+    props: ResponsiveBarCanvasProps<D, I>
+) => ReactElement
diff --git a/packages/bar/src/defaults.ts b/packages/bar/src/defaults.ts
index 41434ccc9..40c9ad758 100644
--- a/packages/bar/src/defaults.ts
+++ b/packages/bar/src/defaults.ts
@@ -10,7 +10,7 @@ import { BarItem } from './BarItem'
 import { BarTooltip } from './BarTooltip'
 import { renderBar } from './renderBar'
 
-export const commonDefaultProps: Omit<BarCommonProps<BarDatum>, 'data' | 'theme'> = {
+export const commonDefaultProps: Omit<BarCommonProps, 'data' | 'theme'> = {
     indexBy: 'id',
     keys: ['value'],
     groupMode: 'stacked' as const,
@@ -35,37 +35,35 @@ export const commonDefaultProps: Omit<BarCommonProps<BarDatum>, 'data' | 'theme'
     borderColor: { from: 'color' } as InheritedColorConfig<any>,
     isInteractive: true,
     tooltip: BarTooltip,
-    tooltipLabel: (datum: ComputedDatum<BarDatum>) => `${datum.id} - ${datum.indexValue}`,
+    tooltipLabel: (datum: ComputedDatum) => `${datum.id} - ${datum.indexValue}`,
     legends: [],
     initialHiddenIds: [],
     annotations: [],
-    enableTotals: false,
+    enableTotals: true,
     totalsOffset: 10,
 }
 
-export const svgDefaultProps: Omit<
-    BarSvgPropsWithDefaults<BarDatum>,
-    'data' | 'width' | 'height' | 'theme'
-> = {
-    ...commonDefaultProps,
-    layers: ['grid', 'axes', 'bars', 'totals', 'markers', 'legends', 'annotations'],
-    axisTop: null,
-    axisRight: null,
-    axisBottom: {},
-    axisLeft: {},
-    barComponent: BarItem,
-    defs: [],
-    fill: [],
-    markers: [],
-    animate: true,
-    animateOnMount: false,
-    motionConfig: 'default',
-    role: 'img',
-    isFocusable: false,
-}
+export const svgDefaultProps: Omit<BarSvgPropsWithDefaults, 'data' | 'width' | 'height' | 'theme'> =
+    {
+        ...commonDefaultProps,
+        layers: ['grid', 'axes', 'bars', 'totals', 'markers', 'legends', 'annotations'],
+        axisTop: null,
+        axisRight: null,
+        axisBottom: {},
+        axisLeft: {},
+        barComponent: BarItem,
+        defs: [],
+        fill: [],
+        markers: [],
+        animate: true,
+        animateOnMount: false,
+        motionConfig: 'default',
+        role: 'img',
+        isFocusable: false,
+    }
 
 export const canvasDefaultProps: Omit<
-    BarCanvasPropsWithDefaults<BarDatum>,
+    BarCanvasPropsWithDefaults,
     'data' | 'width' | 'height' | 'theme'
 > = {
     ...commonDefaultProps,
diff --git a/packages/bar/src/hooks.ts b/packages/bar/src/hooks.ts
index b4085cad6..dd7cd3db3 100644
--- a/packages/bar/src/hooks.ts
+++ b/packages/bar/src/hooks.ts
@@ -9,12 +9,13 @@ import {
     ComputedBarDatumWithValue,
     LegendData,
     BarLegendProps,
+    BarIndex,
 } from './types'
 import { commonDefaultProps } from './defaults'
 import { generateGroupedBars, generateStackedBars, getLegendData } from './compute'
 import { computeBarTotals } from './compute/totals'
 
-export const useBar = <D extends BarDatum>({
+export const useBar = <D extends BarDatum = BarDatum, I extends BarIndex = string>({
     indexBy = commonDefaultProps.indexBy,
     keys = commonDefaultProps.keys,
     label = commonDefaultProps.label,
@@ -43,7 +44,7 @@ export const useBar = <D extends BarDatum>({
     totalsOffset = commonDefaultProps.totalsOffset,
 }: Partial<
     Pick<
-        BarCommonProps<D>,
+        BarCommonProps<D, I>,
         | 'indexBy'
         | 'keys'
         | 'label'
diff --git a/packages/bar/src/renderBar.ts b/packages/bar/src/renderBar.ts
index c4bd95179..b61b3492c 100644
--- a/packages/bar/src/renderBar.ts
+++ b/packages/bar/src/renderBar.ts
@@ -1,8 +1,8 @@
 import { roundedRect } from '@nivo/canvas'
 import { drawCanvasText } from '@nivo/text'
-import { BarDatum, RenderBarProps } from './types'
+import { BarDatum, BarIndex, RenderBarProps } from './types'
 
-export const renderBar = <D extends BarDatum>(
+export const renderBar = <D extends BarDatum = BarDatum, I extends BarIndex = string>(
     ctx: CanvasRenderingContext2D,
     {
         bar: { color, height, width, x, y },
@@ -15,7 +15,7 @@ export const renderBar = <D extends BarDatum>(
         labelX,
         labelY,
         textAnchor,
-    }: RenderBarProps<D>
+    }: RenderBarProps<D, I>
 ) => {
     ctx.fillStyle = color
     if (borderWidth > 0) {
diff --git a/packages/bar/src/types.ts b/packages/bar/src/types.ts
index 0f40befbc..2420449c6 100644
--- a/packages/bar/src/types.ts
+++ b/packages/bar/src/types.ts
@@ -20,33 +20,46 @@ import { AnyScale, ScaleLinearSpec, ScaleSymlogSpec, ScaleBandSpec } from '@nivo
 import { SpringValues } from '@react-spring/web'
 import { BarLabelLayout } from './compute/common'
 
-export type BarDatum = Record<string, string | number>
+// We can use any type for the index, but we need to pick
+// an appropriate scale for the type we choose.
+// The default is a string.
+// The index scale is converted to a band scale eventually,
+// because bars need to be spaced evenly.
+export type BarIndex = string | number | Date
+// We only support numbers for the value, but we can
+// also use null to indicate that the value is missing.
+export type BarValue = number | null
+// Default datum type for the bar chart.
+export type BarDatum = Record<string, unknown>
 
 export interface DataProps<D extends BarDatum> {
     data: readonly D[]
 }
 
-export type ComputedDatum<D extends BarDatum> = {
+export type ComputedDatum<D extends BarDatum = BarDatum, I extends BarIndex = string> = {
     id: string | number
-    value: number | null
+    value: BarValue
     formattedValue: string
     hidden: boolean
     index: number
-    indexValue: string | number
+    indexValue: I
     data: Exclude<D, null | undefined | false | '' | 0>
     fill?: string
 }
 
-export type ComputedBarDatumWithValue<D extends BarDatum> = ComputedBarDatum<D> & {
-    data: ComputedDatum<D> & {
+export type ComputedBarDatumWithValue<
+    D extends BarDatum = BarDatum,
+    I extends BarIndex = string,
+> = ComputedBarDatum<D, I> & {
+    data: ComputedDatum<D, I> & {
         value: number
     }
 }
 
-export type ComputedBarDatum<D extends BarDatum> = {
+export type ComputedBarDatum<D extends BarDatum = BarDatum, I extends BarIndex = string> = {
     key: string
     index: number
-    data: ComputedDatum<D>
+    data: ComputedDatum<D, I>
     x: number
     y: number
     absX: number
@@ -57,7 +70,7 @@ export type ComputedBarDatum<D extends BarDatum> = {
     label: string
 }
 
-export type BarsWithHidden<D extends BarDatum> = Array<
+export type BarsWithHidden<D extends BarDatum = BarDatum, I extends BarIndex = string> = Array<
     Partial<{
         key: string
         x: number
@@ -66,14 +79,16 @@ export type BarsWithHidden<D extends BarDatum> = Array<
         height: number
         color: string
     }> & {
-        data: Partial<ComputedDatum<D>> & {
+        data: Partial<ComputedDatum<D, I>> & {
             id: string | number
             hidden: boolean
         }
     }
 >
 
-export type LegendLabelDatum<D extends BarDatum> = Partial<ComputedDatum<D>> & {
+export type LegendLabelDatum<D extends BarDatum = BarDatum, I extends BarIndex = string> = Partial<
+    ComputedDatum<D, I>
+> & {
     id: string | number
     hidden: boolean
 }
@@ -94,9 +109,9 @@ export type LabelFormatter = (label: string | number) => string | number
 export type BarLayerId = 'grid' | 'axes' | 'bars' | 'markers' | 'legends' | 'annotations' | 'totals'
 export type BarCanvasLayerId = Exclude<BarLayerId, 'markers'>
 
-interface BarCustomLayerBaseProps<D extends BarDatum>
+interface BarCustomLayerBaseProps<D extends BarDatum = BarDatum, I extends BarIndex = string>
     extends Pick<
-            BarCommonProps<D>,
+            BarCommonProps<D, I>,
             | 'borderRadius'
             | 'borderWidth'
             | 'enableLabel'
@@ -106,39 +121,51 @@ interface BarCustomLayerBaseProps<D extends BarDatum>
             | 'tooltip'
         >,
         Dimensions {
-    bars: readonly ComputedBarDatum<D>[]
+    bars: readonly ComputedBarDatum<D, I>[]
     legendData: [BarLegendProps, readonly LegendData[]][]
     margin: Margin
     innerWidth: number
     innerHeight: number
     isFocusable: boolean
-    getTooltipLabel: (datum: ComputedDatum<D>) => string | number
+    getTooltipLabel: (datum: ComputedDatum<D, I>) => string | number
     xScale: AnyScale
     yScale: AnyScale
-    getColor: OrdinalColorScale<ComputedDatum<D>>
+    getColor: OrdinalColorScale<ComputedDatum<D, I>>
 }
 
-export interface BarCustomLayerProps<D extends BarDatum>
-    extends BarCustomLayerBaseProps<D>,
-        BarHandlers<D, SVGRectElement> {}
+export interface BarCustomLayerProps<D extends BarDatum = BarDatum, I extends BarIndex = string>
+    extends BarCustomLayerBaseProps<D, I>,
+        BarHandlers<D, I> {}
 
-export interface BarCanvasCustomLayerProps<D extends BarDatum>
-    extends BarCustomLayerBaseProps<D>,
-        BarHandlers<D, HTMLCanvasElement> {}
+export interface BarCanvasCustomLayerProps<
+    D extends BarDatum = BarDatum,
+    I extends BarIndex = string,
+> extends BarCustomLayerBaseProps<D, I>,
+        BarHandlers<D, I> {}
 
-export type BarCanvasCustomLayer<D extends BarDatum> = (
+export type BarCanvasCustomLayer<D extends BarDatum = BarDatum, I extends BarIndex = string> = (
     context: CanvasRenderingContext2D,
-    props: BarCanvasCustomLayerProps<D>
+    props: BarCanvasCustomLayerProps<D, I>
 ) => void
-export type BarCustomLayer<D extends BarDatum> = FunctionComponent<BarCustomLayerProps<D>>
+export type BarCustomLayer<
+    D extends BarDatum = BarDatum,
+    I extends BarIndex = string,
+> = FunctionComponent<BarCustomLayerProps<D, I>>
 
-export type BarCanvasLayer<D extends BarDatum> = BarCanvasLayerId | BarCanvasCustomLayer<D>
-export type BarLayer<D extends BarDatum> = BarLayerId | BarCustomLayer<D>
+export type BarCanvasLayer<D extends BarDatum = BarDatum, I extends BarIndex = string> =
+    | BarCanvasLayerId
+    | BarCanvasCustomLayer<D, I>
+export type BarLayer<D extends BarDatum = BarDatum, I extends BarIndex = string> =
+    | BarLayerId
+    | BarCustomLayer<D, I>
 
-export interface BarItemProps<D extends BarDatum>
-    extends Pick<BarCommonProps<D>, 'borderRadius' | 'borderWidth' | 'isInteractive' | 'tooltip'>,
-        BarHandlers<D, SVGRectElement> {
-    bar: ComputedBarDatum<D> & {
+export interface BarItemProps<D extends BarDatum = BarDatum, I extends BarIndex = string>
+    extends Pick<
+            BarCommonProps<D, I>,
+            'borderRadius' | 'borderWidth' | 'isInteractive' | 'tooltip'
+        >,
+        BarHandlers<D, I> {
+    bar: ComputedBarDatum<D, I> & {
         data: {
             value: number
         }
@@ -159,16 +186,19 @@ export interface BarItemProps<D extends BarDatum>
     label: string
     shouldRenderLabel: boolean
     isFocusable: boolean
-    ariaLabel?: BarSvgProps<D>['barAriaLabel']
-    ariaLabelledBy?: BarSvgProps<D>['barAriaLabelledBy']
-    ariaDescribedBy?: BarSvgProps<D>['barAriaDescribedBy']
-    ariaHidden?: BarSvgProps<D>['barAriaHidden']
-    ariaDisabled?: BarSvgProps<D>['barAriaDisabled']
+    ariaLabel?: BarSvgProps<D, I>['barAriaLabel']
+    ariaLabelledBy?: BarSvgProps<D, I>['barAriaLabelledBy']
+    ariaDescribedBy?: BarSvgProps<D, I>['barAriaDescribedBy']
+    ariaHidden?: BarSvgProps<D, I>['barAriaHidden']
+    ariaDisabled?: BarSvgProps<D, I>['barAriaDisabled']
 }
-export type BarComponent<D extends BarDatum> = FunctionComponent<BarItemProps<D>>
+export type BarComponent<
+    D extends BarDatum = BarDatum,
+    I extends BarIndex = string,
+> = FunctionComponent<BarItemProps<D, I>>
 
-export type RenderBarProps<D extends BarDatum> = Omit<
-    BarItemProps<D>,
+export type RenderBarProps<D extends BarDatum = BarDatum, I extends BarIndex = string> = Omit<
+    BarItemProps<D, I>,
     | 'isInteractive'
     | 'style'
     | 'tooltip'
@@ -183,26 +213,30 @@ export type RenderBarProps<D extends BarDatum> = Omit<
         borderColor: string
         labelStyle: TextStyle
     }
-export type BarCanvasRenderer<D extends BarDatum> = (
+export type BarCanvasRenderer<D extends BarDatum = BarDatum, I extends BarIndex = string> = (
     context: CanvasRenderingContext2D,
-    props: RenderBarProps<D>
+    props: RenderBarProps<D, I>
 ) => void
 
-export interface BarTooltipProps<D extends BarDatum> extends ComputedDatum<D> {
+export interface BarTooltipProps<D extends BarDatum = BarDatum, I extends BarIndex = string>
+    extends ComputedDatum<D, I> {
     color: string
     label: string
     value: number
 }
-export type BarTooltipComponent<D extends BarDatum> = FunctionComponent<BarTooltipProps<D>>
+export type BarTooltipComponent<
+    D extends BarDatum = BarDatum,
+    I extends BarIndex = string,
+> = FunctionComponent<BarTooltipProps<D, I>>
 
-export type BarHandlers<D extends BarDatum, E extends Element> = {
-    onClick?: (datum: ComputedDatum<D> & { color: string }, event: MouseEvent<E>) => void
-    onMouseEnter?: (datum: ComputedDatum<D>, event: MouseEvent<E>) => void
-    onMouseLeave?: (datum: ComputedDatum<D>, event: MouseEvent<E>) => void
+export type BarHandlers<D extends BarDatum = BarDatum, I extends BarIndex = string> = {
+    onClick?: (datum: ComputedDatum<D, I> & { color: string }, event: MouseEvent) => void
+    onMouseEnter?: (datum: ComputedDatum<D, I>, event: MouseEvent) => void
+    onMouseLeave?: (datum: ComputedDatum<D, I>, event: MouseEvent) => void
 }
 
-export type BarCommonProps<D extends BarDatum> = {
-    indexBy: PropertyAccessor<D, string>
+export type BarCommonProps<D extends BarDatum = BarDatum, I extends BarIndex = string> = {
+    indexBy: PropertyAccessor<D, I>
     keys: readonly string[]
     margin?: Box
     innerPadding: number
@@ -217,24 +251,24 @@ export type BarCommonProps<D extends BarDatum> = {
     borderRadius: number
     borderWidth: number
     enableLabel: boolean
-    label: PropertyAccessor<ComputedDatum<D>, string>
+    label: PropertyAccessor<ComputedDatum<D, I>, string>
     labelPosition: 'start' | 'middle' | 'end'
     labelOffset: number
     labelFormat?: string | LabelFormatter
     labelSkipWidth: number
     labelSkipHeight: number
-    labelTextColor: InheritedColorConfig<ComputedBarDatumWithValue<D>>
+    labelTextColor: InheritedColorConfig<ComputedBarDatumWithValue<D, I>>
     isInteractive: boolean
-    tooltip: BarTooltipComponent<D>
+    tooltip: BarTooltipComponent<D, I>
     valueFormat?: ValueFormat<number>
-    legendLabel?: PropertyAccessor<LegendLabelDatum<D>, string>
-    tooltipLabel: PropertyAccessor<ComputedDatum<D>, string>
+    legendLabel?: PropertyAccessor<LegendLabelDatum<D, I>, string>
+    tooltipLabel: PropertyAccessor<ComputedDatum<D, I>, string>
     groupMode: 'grouped' | 'stacked'
     layout: 'horizontal' | 'vertical'
     colorBy: 'id' | 'indexValue'
-    colors: OrdinalColorScaleConfig<ComputedDatum<D>>
+    colors: OrdinalColorScaleConfig<ComputedDatum<D, I>>
     theme: PartialTheme
-    annotations: readonly AnnotationMatcher<ComputedBarDatum<D>>[]
+    annotations: readonly AnnotationMatcher<ComputedBarDatum<D, I>>[]
     legends: readonly BarLegendProps[]
     renderWrapper?: boolean
     initialHiddenIds: readonly (string | number)[]
@@ -243,71 +277,76 @@ export type BarCommonProps<D extends BarDatum> = {
     role?: string
 }
 
-interface BarSvgExtraProps<D extends BarDatum> {
+interface BarSvgExtraProps<D extends BarDatum = BarDatum, I extends BarIndex = string> {
     axisBottom: AxisProps | null
     axisLeft: AxisProps | null
     axisRight: AxisProps | null
     axisTop: AxisProps | null
-    barComponent: BarComponent<D>
+    barComponent: BarComponent<D, I>
     markers: readonly CartesianMarkerProps[]
-    layers: readonly BarLayer<D>[]
+    layers: readonly BarLayer<D, I>[]
     animateOnMount: boolean
     ariaLabel?: AriaAttributes['aria-label']
     ariaLabelledBy?: AriaAttributes['aria-labelledby']
     ariaDescribedBy?: AriaAttributes['aria-describedby']
     isFocusable: boolean
-    barRole?: string | ((data: ComputedDatum<D>) => string)
-    barAriaLabel?: (data: ComputedDatum<D>) => AriaAttributes['aria-label']
-    barAriaLabelledBy?: (data: ComputedDatum<D>) => AriaAttributes['aria-labelledby']
-    barAriaDescribedBy?: (data: ComputedDatum<D>) => AriaAttributes['aria-describedby']
-    barAriaHidden?: (data: ComputedDatum<D>) => AriaAttributes['aria-hidden']
-    barAriaDisabled?: (data: ComputedDatum<D>) => AriaAttributes['aria-disabled']
+    barRole?: string | ((data: ComputedDatum<D, I>) => string)
+    barAriaLabel?: (data: ComputedDatum<D, I>) => AriaAttributes['aria-label']
+    barAriaLabelledBy?: (data: ComputedDatum<D, I>) => AriaAttributes['aria-labelledby']
+    barAriaDescribedBy?: (data: ComputedDatum<D, I>) => AriaAttributes['aria-describedby']
+    barAriaHidden?: (data: ComputedDatum<D, I>) => AriaAttributes['aria-hidden']
+    barAriaDisabled?: (data: ComputedDatum<D, I>) => AriaAttributes['aria-disabled']
 }
 
-export type BarSvgProps<D extends BarDatum> = DataProps<D> &
-    Partial<BarCommonProps<D>> &
-    Partial<BarSvgExtraProps<D>> &
-    BarHandlers<D, SVGRectElement> &
-    SvgDefsAndFill<ComputedBarDatum<D>> &
+export type BarSvgProps<D extends BarDatum = BarDatum, I extends BarIndex = string> = DataProps<D> &
+    Partial<BarCommonProps<D, I>> &
+    Partial<BarSvgExtraProps<D, I>> &
+    BarHandlers<D, I> &
+    SvgDefsAndFill<ComputedBarDatum<D, I>> &
     Dimensions &
     MotionProps
-export type ResponsiveBarSvgProps<D extends BarDatum> = WithChartRef<
-    ResponsiveProps<BarSvgProps<D>>,
-    SVGSVGElement
->
-export type BarSvgPropsWithDefaults<D extends BarDatum> = DataProps<D> &
-    BarCommonProps<D> &
-    BarSvgExtraProps<D> &
-    SvgDefsAndFill<ComputedBarDatum<D>> &
+export type ResponsiveBarSvgProps<
+    D extends BarDatum = BarDatum,
+    I extends BarIndex = string,
+> = WithChartRef<ResponsiveProps<BarSvgProps<D, I>>, SVGSVGElement>
+export type BarSvgPropsWithDefaults<
+    D extends BarDatum = BarDatum,
+    I extends BarIndex = string,
+> = DataProps<D> &
+    BarCommonProps<D, I> &
+    BarSvgExtraProps<D, I> &
+    SvgDefsAndFill<ComputedBarDatum<D, I>> &
     Dimensions &
     MotionProps
 
-interface BarCanvasExtraProps<D extends BarDatum> {
+interface BarCanvasExtraProps<D extends BarDatum = BarDatum, I extends BarIndex = string> {
     axisBottom: CanvasAxisProps<any> | null
     axisLeft: CanvasAxisProps<any> | null
     axisRight: CanvasAxisProps<any> | null
     axisTop: CanvasAxisProps<any> | null
-    renderBar: BarCanvasRenderer<D>
-    layers: BarCanvasLayer<D>[]
+    renderBar: BarCanvasRenderer<D, I>
+    layers: BarCanvasLayer<D, I>[]
     pixelRatio: number
 }
 
-export type BarCanvasProps<D extends BarDatum> = DataProps<D> &
-    Partial<BarCommonProps<D>> &
-    Partial<BarCanvasExtraProps<D>> &
-    BarHandlers<D, HTMLCanvasElement> &
-    Dimensions
-export type ResponsiveBarCanvasProps<D extends BarDatum> = WithChartRef<
-    ResponsiveProps<BarCanvasProps<D>>,
-    HTMLCanvasElement
->
-export type BarCanvasPropsWithDefaults<D extends BarDatum> = DataProps<D> &
-    BarCommonProps<D> &
-    BarCanvasExtraProps<D> &
-    BarHandlers<D, HTMLCanvasElement> &
+export type BarCanvasProps<
+    D extends BarDatum = BarDatum,
+    I extends BarIndex = string,
+> = DataProps<D> &
+    Partial<BarCommonProps<D, I>> &
+    Partial<BarCanvasExtraProps<D, I>> &
+    BarHandlers<D, I> &
     Dimensions
+export type ResponsiveBarCanvasProps<
+    D extends BarDatum = BarDatum,
+    I extends BarIndex = string,
+> = WithChartRef<ResponsiveProps<BarCanvasProps<D, I>>, HTMLCanvasElement>
+export type BarCanvasPropsWithDefaults<
+    D extends BarDatum = BarDatum,
+    I extends BarIndex = string,
+> = DataProps<D> & BarCommonProps<D, I> & BarCanvasExtraProps<D, I> & BarHandlers<D, I> & Dimensions
 
-export type BarAnnotationsProps<D extends BarDatum> = {
-    annotations: readonly AnnotationMatcher<ComputedBarDatum<D>>[]
-    bars: readonly ComputedBarDatum<D>[]
+export type BarAnnotationsProps<D extends BarDatum = BarDatum, I extends BarIndex = string> = {
+    annotations: readonly AnnotationMatcher<ComputedBarDatum<D, I>>[]
+    bars: readonly ComputedBarDatum<D, I>[]
 }

From 5a213456e9f8b59cdb15321bbaffd58684f0c78c Mon Sep 17 00:00:00 2001
From: plouc <benitteraphael@gmail.com>
Date: Sat, 24 May 2025 07:57:45 +0900
Subject: [PATCH 2/4] feat(bar): add typings for more interaction handlers

---
 packages/bar/src/types.ts | 48 ++++++++++++++++++++++++++++-----------
 1 file changed, 35 insertions(+), 13 deletions(-)

diff --git a/packages/bar/src/types.ts b/packages/bar/src/types.ts
index 2420449c6..372a51a40 100644
--- a/packages/bar/src/types.ts
+++ b/packages/bar/src/types.ts
@@ -1,4 +1,5 @@
-import { MouseEvent, AriaAttributes, FunctionComponent } from 'react'
+import { AriaAttributes, FunctionComponent } from 'react'
+import { SpringValues } from '@react-spring/web'
 import { AnnotationMatcher } from '@nivo/annotations'
 import { AxisProps, CanvasAxisProps, GridValues } from '@nivo/axes'
 import {
@@ -12,12 +13,13 @@ import {
     ValueFormat,
     WithChartRef,
     ResponsiveProps,
+    EventMap,
+    InteractionHandlers,
 } from '@nivo/core'
 import { PartialTheme, TextStyle } from '@nivo/theming'
 import { InheritedColorConfig, OrdinalColorScale, OrdinalColorScaleConfig } from '@nivo/colors'
 import { LegendProps } from '@nivo/legends'
 import { AnyScale, ScaleLinearSpec, ScaleSymlogSpec, ScaleBandSpec } from '@nivo/scales'
-import { SpringValues } from '@react-spring/web'
 import { BarLabelLayout } from './compute/common'
 
 // We can use any type for the index, but we need to pick
@@ -135,13 +137,13 @@ interface BarCustomLayerBaseProps<D extends BarDatum = BarDatum, I extends BarIn
 
 export interface BarCustomLayerProps<D extends BarDatum = BarDatum, I extends BarIndex = string>
     extends BarCustomLayerBaseProps<D, I>,
-        BarHandlers<D, I> {}
+        BarInteractionHandlers<D, I> {}
 
 export interface BarCanvasCustomLayerProps<
     D extends BarDatum = BarDatum,
     I extends BarIndex = string,
 > extends BarCustomLayerBaseProps<D, I>,
-        BarHandlers<D, I> {}
+        BarInteractionHandlers<D, I> {}
 
 export type BarCanvasCustomLayer<D extends BarDatum = BarDatum, I extends BarIndex = string> = (
     context: CanvasRenderingContext2D,
@@ -164,7 +166,7 @@ export interface BarItemProps<D extends BarDatum = BarDatum, I extends BarIndex
             BarCommonProps<D, I>,
             'borderRadius' | 'borderWidth' | 'isInteractive' | 'tooltip'
         >,
-        BarHandlers<D, I> {
+        BarInteractionHandlers<D, I> {
     bar: ComputedBarDatum<D, I> & {
         data: {
             value: number
@@ -229,11 +231,23 @@ export type BarTooltipComponent<
     I extends BarIndex = string,
 > = FunctionComponent<BarTooltipProps<D, I>>
 
-export type BarHandlers<D extends BarDatum = BarDatum, I extends BarIndex = string> = {
-    onClick?: (datum: ComputedDatum<D, I> & { color: string }, event: MouseEvent) => void
-    onMouseEnter?: (datum: ComputedDatum<D, I>, event: MouseEvent) => void
-    onMouseLeave?: (datum: ComputedDatum<D, I>, event: MouseEvent) => void
-}
+type BarEventMap = Pick<
+    EventMap,
+    | 'onMouseEnter'
+    | 'onMouseMove'
+    | 'onMouseLeave'
+    | 'onClick'
+    | 'onDoubleClick'
+    | 'onFocus'
+    | 'onBlur'
+    | 'onKeyDown'
+    | 'onWheel'
+    | 'onContextMenu'
+>
+export type BarInteractionHandlers<
+    D extends BarDatum = BarDatum,
+    I extends BarIndex = string,
+> = InteractionHandlers<ComputedDatum<D, I>, BarEventMap>
 
 export type BarCommonProps<D extends BarDatum = BarDatum, I extends BarIndex = string> = {
     indexBy: PropertyAccessor<D, I>
@@ -301,14 +315,16 @@ interface BarSvgExtraProps<D extends BarDatum = BarDatum, I extends BarIndex = s
 export type BarSvgProps<D extends BarDatum = BarDatum, I extends BarIndex = string> = DataProps<D> &
     Partial<BarCommonProps<D, I>> &
     Partial<BarSvgExtraProps<D, I>> &
-    BarHandlers<D, I> &
+    BarInteractionHandlers<D, I> &
     SvgDefsAndFill<ComputedBarDatum<D, I>> &
     Dimensions &
     MotionProps
+
 export type ResponsiveBarSvgProps<
     D extends BarDatum = BarDatum,
     I extends BarIndex = string,
 > = WithChartRef<ResponsiveProps<BarSvgProps<D, I>>, SVGSVGElement>
+
 export type BarSvgPropsWithDefaults<
     D extends BarDatum = BarDatum,
     I extends BarIndex = string,
@@ -335,16 +351,22 @@ export type BarCanvasProps<
 > = DataProps<D> &
     Partial<BarCommonProps<D, I>> &
     Partial<BarCanvasExtraProps<D, I>> &
-    BarHandlers<D, I> &
+    BarInteractionHandlers<D, I> &
     Dimensions
+
 export type ResponsiveBarCanvasProps<
     D extends BarDatum = BarDatum,
     I extends BarIndex = string,
 > = WithChartRef<ResponsiveProps<BarCanvasProps<D, I>>, HTMLCanvasElement>
+
 export type BarCanvasPropsWithDefaults<
     D extends BarDatum = BarDatum,
     I extends BarIndex = string,
-> = DataProps<D> & BarCommonProps<D, I> & BarCanvasExtraProps<D, I> & BarHandlers<D, I> & Dimensions
+> = DataProps<D> &
+    BarCommonProps<D, I> &
+    BarCanvasExtraProps<D, I> &
+    BarInteractionHandlers<D, I> &
+    Dimensions
 
 export type BarAnnotationsProps<D extends BarDatum = BarDatum, I extends BarIndex = string> = {
     annotations: readonly AnnotationMatcher<ComputedBarDatum<D, I>>[]

From 17a3b6d308aa8cc0c4dafbf470046c7c824ac6fe Mon Sep 17 00:00:00 2001
From: plouc <benitteraphael@gmail.com>
Date: Sat, 24 May 2025 08:10:35 +0900
Subject: [PATCH 3/4] feat(bar): improve default props casting

---
 packages/bar/src/Bar.tsx       |  9 ++++++---
 packages/bar/src/BarCanvas.tsx |  3 ++-
 packages/bar/src/defaults.ts   | 14 ++++++--------
 packages/bar/src/types.ts      |  6 ++++--
 4 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/packages/bar/src/Bar.tsx b/packages/bar/src/Bar.tsx
index 111ef2bf5..163ab37a7 100644
--- a/packages/bar/src/Bar.tsx
+++ b/packages/bar/src/Bar.tsx
@@ -17,6 +17,8 @@ import { BarLegends } from './BarLegends'
 import { useBar } from './hooks'
 import { svgDefaultProps } from './defaults'
 import {
+    BarAnnotationMatcher,
+    BarBorderColor,
     BarComponent,
     BarCustomLayerProps,
     BarDatum,
@@ -66,14 +68,15 @@ const InnerBar = <D extends BarDatum = BarDatum, I extends BarIndex = string>({
     labelPosition = svgDefaultProps.labelPosition,
     labelOffset = svgDefaultProps.labelOffset,
     markers = svgDefaultProps.markers,
-    colorBy,
     colors,
+    colorBy,
     defs = svgDefaultProps.defs,
+    // @ts-expect-error the typings for SVG fill are not easy to get right.
     fill = svgDefaultProps.fill,
     borderRadius = svgDefaultProps.borderRadius,
     borderWidth = svgDefaultProps.borderWidth,
-    borderColor,
-    annotations = svgDefaultProps.annotations,
+    borderColor = svgDefaultProps.borderColor as BarBorderColor<D, I>,
+    annotations = svgDefaultProps.annotations as BarAnnotationMatcher<D, I>[],
     legendLabel,
     tooltipLabel,
     valueFormat,
diff --git a/packages/bar/src/BarCanvas.tsx b/packages/bar/src/BarCanvas.tsx
index 0033eb65e..6863c28d1 100644
--- a/packages/bar/src/BarCanvas.tsx
+++ b/packages/bar/src/BarCanvas.tsx
@@ -30,6 +30,7 @@ import { renderAxesToCanvas, renderGridLinesToCanvas } from '@nivo/axes'
 import { renderLegendToCanvas } from '@nivo/legends'
 import { useTooltip } from '@nivo/tooltip'
 import {
+    BarAnnotationMatcher,
     BarCanvasCustomLayerProps,
     BarCanvasLayer,
     BarCanvasProps,
@@ -113,7 +114,7 @@ const InnerBarCanvas = <D extends BarDatum = BarDatum, I extends BarIndex = stri
     borderRadius = canvasDefaultProps.borderRadius,
     borderWidth = canvasDefaultProps.borderWidth,
     borderColor,
-    annotations = canvasDefaultProps.annotations,
+    annotations = canvasDefaultProps.annotations as BarAnnotationMatcher<D, I>[],
     legendLabel,
     tooltipLabel,
     valueFormat,
diff --git a/packages/bar/src/defaults.ts b/packages/bar/src/defaults.ts
index 40c9ad758..4e0e6ec8e 100644
--- a/packages/bar/src/defaults.ts
+++ b/packages/bar/src/defaults.ts
@@ -1,7 +1,5 @@
-import { InheritedColorConfig, OrdinalColorScaleConfig } from '@nivo/colors'
 import {
     BarCommonProps,
-    BarDatum,
     ComputedDatum,
     BarSvgPropsWithDefaults,
     BarCanvasPropsWithDefaults,
@@ -13,8 +11,8 @@ import { renderBar } from './renderBar'
 export const commonDefaultProps: Omit<BarCommonProps, 'data' | 'theme'> = {
     indexBy: 'id',
     keys: ['value'],
-    groupMode: 'stacked' as const,
-    layout: 'vertical' as const,
+    groupMode: 'stacked',
+    layout: 'vertical',
     valueScale: { type: 'linear', nice: true, round: false },
     indexScale: { type: 'band', round: false },
     padding: 0.1,
@@ -23,16 +21,16 @@ export const commonDefaultProps: Omit<BarCommonProps, 'data' | 'theme'> = {
     enableGridY: true,
     enableLabel: true,
     label: 'formattedValue',
-    labelPosition: 'middle' as const,
+    labelPosition: 'middle',
     labelOffset: 0,
     labelSkipWidth: 0,
     labelSkipHeight: 0,
     labelTextColor: { theme: 'labels.text.fill' },
-    colorBy: 'id' as const,
-    colors: { scheme: 'nivo' } as OrdinalColorScaleConfig,
+    colorBy: 'id',
+    colors: { scheme: 'nivo' },
     borderRadius: 0,
     borderWidth: 0,
-    borderColor: { from: 'color' } as InheritedColorConfig<any>,
+    borderColor: { from: 'color' },
     isInteractive: true,
     tooltip: BarTooltip,
     tooltipLabel: (datum: ComputedDatum) => `${datum.id} - ${datum.indexValue}`,
diff --git a/packages/bar/src/types.ts b/packages/bar/src/types.ts
index 372a51a40..d0730478a 100644
--- a/packages/bar/src/types.ts
+++ b/packages/bar/src/types.ts
@@ -33,6 +33,8 @@ export type BarIndex = string | number | Date
 export type BarValue = number | null
 // Default datum type for the bar chart.
 export type BarDatum = Record<string, unknown>
+export type BarBorderColor<D extends BarDatum = BarDatum, I extends BarIndex = string> = InheritedColorConfig<ComputedBarDatumWithValue<D, I>>
+export type BarAnnotationMatcher<D extends BarDatum = BarDatum, I extends BarIndex = string> = AnnotationMatcher<ComputedBarDatum<D, I>>
 
 export interface DataProps<D extends BarDatum> {
     data: readonly D[]
@@ -261,7 +263,7 @@ export type BarCommonProps<D extends BarDatum = BarDatum, I extends BarIndex = s
     gridXValues?: GridValues<string | number>
     enableGridY: boolean
     gridYValues?: GridValues<string | number>
-    borderColor: InheritedColorConfig<ComputedBarDatumWithValue<D>>
+    borderColor: BarBorderColor<D, I>
     borderRadius: number
     borderWidth: number
     enableLabel: boolean
@@ -369,6 +371,6 @@ export type BarCanvasPropsWithDefaults<
     Dimensions
 
 export type BarAnnotationsProps<D extends BarDatum = BarDatum, I extends BarIndex = string> = {
-    annotations: readonly AnnotationMatcher<ComputedBarDatum<D, I>>[]
+    annotations: readonly BarAnnotationMatcher<D, I>[]
     bars: readonly ComputedBarDatum<D, I>[]
 }

From e04d8ba45c7763c8af7a77e62b460568e5bb2767 Mon Sep 17 00:00:00 2001
From: plouc <benitteraphael@gmail.com>
Date: Sat, 24 May 2025 09:16:54 +0900
Subject: [PATCH 4/4] feat(bar): propagate the index value type in compute
 helpers

---
 packages/bar/src/Bar.tsx            |  8 ++--
 packages/bar/src/BarCanvas.tsx      |  9 ++--
 packages/bar/src/compute/common.ts  | 21 ++++++----
 packages/bar/src/compute/grouped.ts | 16 ++++----
 packages/bar/src/compute/legends.ts | 21 +++++-----
 packages/bar/src/compute/stacked.ts | 34 +++++++--------
 packages/bar/src/compute/totals.ts  | 10 ++---
 packages/bar/src/hooks.ts           | 38 +++++++++++------
 packages/bar/src/types.ts           | 64 ++++++++++++++++++++---------
 9 files changed, 132 insertions(+), 89 deletions(-)

diff --git a/packages/bar/src/Bar.tsx b/packages/bar/src/Bar.tsx
index 163ab37a7..04be3a389 100644
--- a/packages/bar/src/Bar.tsx
+++ b/packages/bar/src/Bar.tsx
@@ -161,7 +161,7 @@ const InnerBar = <D extends BarDatum = BarDatum, I extends BarIndex = string>({
     )
 
     const transition = useTransition<
-        ComputedBarDatumWithValue<D>,
+        ComputedBarDatumWithValue<D, I>,
         {
             borderColor: string
             color: string
@@ -173,7 +173,7 @@ const InnerBar = <D extends BarDatum = BarDatum, I extends BarIndex = string>({
             opacity: number
             transform: string
             width: number
-            textAnchor: BarItemProps<D>['style']['textAnchor']
+            textAnchor: BarItemProps<D, I>['style']['textAnchor']
         }
     >(barsWithValue, {
         keys: bar => bar.key,
@@ -297,7 +297,7 @@ const InnerBar = <D extends BarDatum = BarDatum, I extends BarIndex = string>({
 
     if (layers.includes('annotations')) {
         layerById.annotations = (
-            <BarAnnotations key="annotations" bars={bars} annotations={annotations} />
+            <BarAnnotations<D, I> key="annotations" bars={bars} annotations={annotations} />
         )
     }
 
@@ -374,7 +374,7 @@ const InnerBar = <D extends BarDatum = BarDatum, I extends BarIndex = string>({
 
     if (layers.includes('totals') && enableTotals) {
         layerById.totals = (
-            <BarTotals
+            <BarTotals<D, I>
                 key="totals"
                 data={barTotals}
                 springConfig={springConfig}
diff --git a/packages/bar/src/BarCanvas.tsx b/packages/bar/src/BarCanvas.tsx
index 6863c28d1..dc619117d 100644
--- a/packages/bar/src/BarCanvas.tsx
+++ b/packages/bar/src/BarCanvas.tsx
@@ -38,6 +38,7 @@ import {
     BarCommonProps,
     BarDatum,
     BarIndex,
+    BarLabel,
     BarTooltipComponent,
     ComputedBarDatum,
 } from './types'
@@ -105,7 +106,7 @@ const InnerBarCanvas = <D extends BarDatum = BarDatum, I extends BarIndex = stri
     layers = canvasDefaultProps.layers as BarCanvasLayer<D, I>[],
     renderBar = canvasDefaultProps.renderBar as unknown as BarCanvasRenderer<D, I>,
     enableLabel = canvasDefaultProps.enableLabel,
-    label,
+    label = canvasDefaultProps.label as BarLabel<D, I>,
     labelSkipWidth = canvasDefaultProps.labelSkipWidth,
     labelSkipHeight = canvasDefaultProps.labelSkipHeight,
     labelTextColor,
@@ -116,7 +117,7 @@ const InnerBarCanvas = <D extends BarDatum = BarDatum, I extends BarIndex = stri
     borderColor,
     annotations = canvasDefaultProps.annotations as BarAnnotationMatcher<D, I>[],
     legendLabel,
-    tooltipLabel,
+    tooltipLabel = canvasDefaultProps.tooltipLabel as BarLabel<D, I>,
     valueFormat,
     isInteractive = canvasDefaultProps.isInteractive,
     tooltip = canvasDefaultProps.tooltip as BarTooltipComponent<D, I>,
@@ -183,7 +184,7 @@ const InnerBarCanvas = <D extends BarDatum = BarDatum, I extends BarIndex = stri
     const { showTooltipFromEvent, hideTooltip } = useTooltip()
 
     // Using any because return type isn't correct
-    const boundAnnotations: any = useComputedAnnotations({
+    const boundAnnotations: any = useComputedAnnotations<ComputedBarDatum<D, I>>({
         annotations: useAnnotations({
             data: bars,
             annotations,
@@ -200,7 +201,7 @@ const InnerBarCanvas = <D extends BarDatum = BarDatum, I extends BarIndex = stri
     })
 
     // We use `any` here until we can figure out the best way to type xScale/yScale
-    const layerContext: BarCanvasCustomLayerProps<D> = useMemo(
+    const layerContext: BarCanvasCustomLayerProps<D, I> = useMemo(
         () => ({
             borderRadius,
             borderWidth,
diff --git a/packages/bar/src/compute/common.ts b/packages/bar/src/compute/common.ts
index 5804b43f0..3e57eef29 100644
--- a/packages/bar/src/compute/common.ts
+++ b/packages/bar/src/compute/common.ts
@@ -1,13 +1,13 @@
 import { ScaleBandSpec, ScaleBand, computeScale } from '@nivo/scales'
 import { commonDefaultProps } from '../defaults'
-import { BarCommonProps, BarDatum } from '../types'
+import { BarCommonProps, BarDatum, BarIndex } from '../types'
 
 /**
  * Generates indexed scale.
  */
-export const getIndexScale = <D extends BarDatum>(
+export const getIndexScale = <D extends BarDatum = BarDatum, I extends BarIndex = string>(
     data: readonly D[],
-    getIndex: (datum: D) => string,
+    getIndex: (datum: D) => I,
     padding: number,
     indexScale: ScaleBandSpec,
     size: number,
@@ -26,7 +26,10 @@ export const getIndexScale = <D extends BarDatum>(
 /**
  * This method ensures all the provided keys exist in the entire series.
  */
-export const normalizeData = <D extends BarDatum>(data: readonly D[], keys: readonly string[]) =>
+export const normalizeData = <D extends BarDatum = BarDatum>(
+    data: readonly D[],
+    keys: readonly string[]
+) =>
     data.map(
         item =>
             ({
@@ -38,7 +41,7 @@ export const normalizeData = <D extends BarDatum>(data: readonly D[], keys: read
             }) as D
     )
 
-export const filterNullValues = <D extends BarDatum>(data: D) =>
+export const filterNullValues = <D extends BarDatum = BarDatum>(data: D) =>
     Object.keys(data).reduce<Record<string, unknown>>((acc, key) => {
         if (data[key]) {
             acc[key] = data[key]
@@ -57,11 +60,11 @@ export type BarLabelLayout = {
 /**
  * Compute the label position and alignment based on a given position and offset.
  */
-export function useComputeLabelLayout<D extends BarDatum>(
-    layout: BarCommonProps<D>['layout'] = commonDefaultProps.layout,
+export function useComputeLabelLayout<D extends BarDatum = BarDatum, I extends BarIndex = string>(
+    layout: BarCommonProps<D, I>['layout'] = commonDefaultProps.layout,
     reverse: boolean,
-    labelPosition: BarCommonProps<D>['labelPosition'] = commonDefaultProps.labelPosition,
-    labelOffset: BarCommonProps<D>['labelOffset'] = commonDefaultProps.labelOffset
+    labelPosition: BarCommonProps<D, I>['labelPosition'] = commonDefaultProps.labelPosition,
+    labelOffset: BarCommonProps<D, I>['labelOffset'] = commonDefaultProps.labelOffset
 ): (width: number, height: number) => BarLabelLayout {
     return (width: number, height: number) => {
         // If the chart is reversed, we want to make sure the offset is also reversed
diff --git a/packages/bar/src/compute/grouped.ts b/packages/bar/src/compute/grouped.ts
index 93afb2ec6..aeb5856db 100644
--- a/packages/bar/src/compute/grouped.ts
+++ b/packages/bar/src/compute/grouped.ts
@@ -1,7 +1,7 @@
 import { Margin } from '@nivo/core'
 import { OrdinalColorScale } from '@nivo/colors'
 import { Scale, ScaleBand, computeScale } from '@nivo/scales'
-import { BarDatum, BarSvgProps, ComputedBarDatum, ComputedDatum } from '../types'
+import { BarDatum, BarIndex, BarSvgProps, ComputedBarDatum, ComputedDatum } from '../types'
 import { coerceValue, filterNullValues, getIndexScale, normalizeData } from './common'
 
 type Params<D extends BarDatum, XScaleInput, YScaleInput> = {
@@ -151,9 +151,9 @@ const generateHorizontalGroupedBars = <D extends BarDatum>(
 }
 
 /**
- * Generates x/y scales & bars for grouped bar chart.
+ * Generates x/y scales and bars for grouped bar chart.
  */
-export const generateGroupedBars = <D extends BarDatum>({
+export const generateGroupedBars = <D extends BarDatum = BarDatum, I extends BarIndex = string>({
     layout,
     width,
     height,
@@ -164,7 +164,7 @@ export const generateGroupedBars = <D extends BarDatum>({
     hiddenIds = [],
     ...props
 }: Pick<
-    Required<BarSvgProps<D>>,
+    Required<BarSvgProps<D, I>>,
     | 'data'
     | 'height'
     | 'valueScale'
@@ -176,9 +176,9 @@ export const generateGroupedBars = <D extends BarDatum>({
     | 'width'
 > & {
     formatValue: (value: number) => string
-    getColor: OrdinalColorScale<ComputedDatum<D>>
-    getIndex: (datum: D) => string
-    getTooltipLabel: (datum: ComputedDatum<D>) => string
+    getColor: OrdinalColorScale<ComputedDatum<D, I>>
+    getIndex: (datum: D) => I
+    getTooltipLabel: (datum: ComputedBarDatum<D, I>) => string
     margin: Margin
     hiddenIds?: readonly (string | number)[]
 }) => {
@@ -221,7 +221,7 @@ export const generateGroupedBars = <D extends BarDatum>({
         scale(0) ?? 0,
     ] as const
 
-    const bars: ComputedBarDatum<D>[] =
+    const bars: ComputedBarDatum<D, I>[] =
         bandwidth > 0
             ? layout === 'vertical'
                 ? generateVerticalGroupedBars(...params)
diff --git a/packages/bar/src/compute/legends.ts b/packages/bar/src/compute/legends.ts
index f4e83db36..b055b986f 100644
--- a/packages/bar/src/compute/legends.ts
+++ b/packages/bar/src/compute/legends.ts
@@ -1,5 +1,6 @@
 import {
     BarDatum,
+    BarIndex,
     BarLegendProps,
     BarSvgProps,
     BarsWithHidden,
@@ -40,10 +41,10 @@ export const getLegendDataForKeys = <RawDatum extends BarDatum>(
     return data
 }
 
-export const getLegendDataForIndexes = <RawDatum extends BarDatum>(
-    bars: BarsWithHidden<RawDatum>,
-    layout: NonNullable<BarSvgProps<RawDatum>['layout']>,
-    getLegendLabel: (datum: LegendLabelDatum<RawDatum>) => string
+export const getLegendDataForIndexes = <D extends BarDatum = BarDatum, I extends BarIndex = string>(
+    bars: BarsWithHidden<D, I>,
+    layout: NonNullable<BarSvgProps<D, I>['layout']>,
+    getLegendLabel: (datum: LegendLabelDatum<D, I>) => string
 ): LegendData[] => {
     const data = uniqBy(
         bars.map(bar => ({
@@ -62,7 +63,7 @@ export const getLegendDataForIndexes = <RawDatum extends BarDatum>(
     return data
 }
 
-export const getLegendData = <RawDatum extends BarDatum>({
+export const getLegendData = <D extends BarDatum = BarDatum, I extends BarIndex = string>({
     bars,
     direction,
     from,
@@ -70,11 +71,11 @@ export const getLegendData = <RawDatum extends BarDatum>({
     layout,
     legendLabel,
     reverse,
-}: Pick<Required<BarSvgProps<RawDatum>>, 'layout' | 'groupMode'> & {
-    bars: BarsWithHidden<RawDatum>
+}: Pick<Required<BarSvgProps<D, I>>, 'layout' | 'groupMode'> & {
+    bars: BarsWithHidden<D, I>
     direction: BarLegendProps['direction']
     from: BarLegendProps['dataFrom']
-    legendLabel: BarSvgProps<RawDatum>['legendLabel']
+    legendLabel: BarSvgProps<D, I>['legendLabel']
     reverse: boolean
 }) => {
     const getLegendLabel = getPropertyAccessor(
@@ -82,8 +83,8 @@ export const getLegendData = <RawDatum extends BarDatum>({
     )
 
     if (from === 'indexes') {
-        return getLegendDataForIndexes(bars, layout, getLegendLabel)
+        return getLegendDataForIndexes<D>(bars, layout, getLegendLabel)
     }
 
-    return getLegendDataForKeys(bars, layout, direction, groupMode, reverse, getLegendLabel)
+    return getLegendDataForKeys<D>(bars, layout, direction, groupMode, reverse, getLegendLabel)
 }
diff --git a/packages/bar/src/compute/stacked.ts b/packages/bar/src/compute/stacked.ts
index 113515721..e8f0817e2 100644
--- a/packages/bar/src/compute/stacked.ts
+++ b/packages/bar/src/compute/stacked.ts
@@ -2,7 +2,7 @@ import { Margin } from '@nivo/core'
 import { OrdinalColorScale } from '@nivo/colors'
 import { Scale, ScaleBand, computeScale } from '@nivo/scales'
 import { Series, SeriesPoint, stack, stackOffsetDiverging } from 'd3-shape'
-import { BarDatum, BarSvgProps, ComputedBarDatum, ComputedDatum } from '../types'
+import { BarDatum, BarIndex, BarSvgProps, ComputedBarDatum, ComputedDatum } from '../types'
 import { coerceValue, filterNullValues, getIndexScale, normalizeData } from './common'
 
 type StackDatum<D extends BarDatum> = SeriesPoint<D>
@@ -26,9 +26,9 @@ const filterZerosIfLog = (array: number[], type: string) =>
     type === 'log' ? array.filter(num => num !== 0) : array
 
 /**
- * Generates x/y scales & bars for vertical stacked bar chart.
+ * Generates x/y scales and bars for vertical stacked bar chart.
  */
-const generateVerticalStackedBars = <D extends BarDatum>(
+const generateVerticalStackedBars = <D extends BarDatum = BarDatum, I extends BarIndex = string>(
     {
         formatValue,
         getColor,
@@ -42,7 +42,7 @@ const generateVerticalStackedBars = <D extends BarDatum>(
     }: Params<D, string, number>,
     barWidth: number,
     reverse: boolean
-): ComputedBarDatum<D>[] => {
+): ComputedBarDatum<D, I>[] => {
     const getY = (d: StackDatum<D>) => yScale(d[reverse ? 0 : 1])
     const getHeight = (d: StackDatum<D>, y: number) => (yScale(d[reverse ? 1 : 0]) ?? 0) - y
 
@@ -85,9 +85,9 @@ const generateVerticalStackedBars = <D extends BarDatum>(
 }
 
 /**
- * Generates x/y scales & bars for horizontal stacked bar chart.
+ * Generates x/y scales and bars for horizontal stacked bar chart.
  */
-const generateHorizontalStackedBars = <D extends BarDatum>(
+const generateHorizontalStackedBars = <D extends BarDatum = BarDatum, I extends BarIndex = string>(
     {
         formatValue,
         getColor,
@@ -101,11 +101,11 @@ const generateHorizontalStackedBars = <D extends BarDatum>(
     }: Params<D, number, string>,
     barHeight: number,
     reverse: boolean
-): ComputedBarDatum<D>[] => {
+): ComputedBarDatum<D, I>[] => {
     const getX = (d: StackDatum<D>) => xScale(d[reverse ? 1 : 0])
     const getWidth = (d: StackDatum<D>, x: number) => (xScale(d[reverse ? 0 : 1]) ?? 0) - x
 
-    const bars: ComputedBarDatum<D>[] = []
+    const bars: ComputedBarDatum<D, I>[] = []
     stackedData.forEach(stackedDataItem =>
         yScale.domain().forEach((index, i) => {
             const d = stackedDataItem[i]
@@ -144,9 +144,9 @@ const generateHorizontalStackedBars = <D extends BarDatum>(
 }
 
 /**
- * Generates x/y scales & bars for stacked bar chart.
+ * Generates x/y scales and bars for stacked bar chart.
  */
-export const generateStackedBars = <RawDatum extends BarDatum>({
+export const generateStackedBars = <D extends BarDatum = BarDatum, I extends BarIndex = string>({
     data,
     layout,
     width,
@@ -157,7 +157,7 @@ export const generateStackedBars = <RawDatum extends BarDatum>({
     hiddenIds = [],
     ...props
 }: Pick<
-    Required<BarSvgProps<RawDatum>>,
+    Required<BarSvgProps<D, I>>,
     | 'data'
     | 'height'
     | 'valueScale'
@@ -169,14 +169,14 @@ export const generateStackedBars = <RawDatum extends BarDatum>({
     | 'width'
 > & {
     formatValue: (value: number) => string
-    getColor: OrdinalColorScale<ComputedDatum<RawDatum>>
-    getIndex: (datum: RawDatum) => string
-    getTooltipLabel: (datum: ComputedDatum<RawDatum>) => string
+    getColor: OrdinalColorScale<ComputedDatum<D, I>>
+    getIndex: (datum: D) => I
+    getTooltipLabel: (datum: ComputedBarDatum<D, I>) => string
     margin: Margin
     hiddenIds?: readonly (string | number)[]
 }) => {
     const keys = props.keys.filter(key => !hiddenIds.includes(key))
-    const stackedData = stack<RawDatum, string>().keys(keys).offset(stackOffsetDiverging)(
+    const stackedData = stack<D, string>().keys(keys).offset(stackOffsetDiverging)(
         normalizeData(data, keys)
     )
 
@@ -210,12 +210,12 @@ export const generateStackedBars = <RawDatum extends BarDatum>({
     const innerPadding = props.innerPadding > 0 ? props.innerPadding : 0
     const bandwidth = indexScale.bandwidth()
     const params = [
-        { ...props, innerPadding, stackedData, xScale, yScale } as Params<RawDatum, any, any>,
+        { ...props, innerPadding, stackedData, xScale, yScale } as Params<D, any, any>,
         bandwidth,
         valueScale.reverse ?? false,
     ] as const
 
-    const bars: ComputedBarDatum<RawDatum>[] =
+    const bars: ComputedBarDatum<D, I>[] =
         bandwidth > 0
             ? layout === 'vertical'
                 ? generateVerticalStackedBars(...params)
diff --git a/packages/bar/src/compute/totals.ts b/packages/bar/src/compute/totals.ts
index 0d67400eb..690f840b8 100644
--- a/packages/bar/src/compute/totals.ts
+++ b/packages/bar/src/compute/totals.ts
@@ -1,6 +1,6 @@
 import { AnyScale, ScaleBand } from '@nivo/scales'
 import { commonDefaultProps } from '../defaults'
-import { BarCommonProps, BarDatum, ComputedBarDatum } from '../types'
+import { BarCommonProps, BarDatum, BarIndex, ComputedBarDatum } from '../types'
 
 export interface BarTotalsData {
     key: string
@@ -11,12 +11,12 @@ export interface BarTotalsData {
     animationOffset: number
 }
 
-export const computeBarTotals = <D extends BarDatum>(
-    bars: ComputedBarDatum<D>[],
+export const computeBarTotals = <D extends BarDatum = BarDatum, I extends BarIndex = string>(
+    bars: ComputedBarDatum<D, I>[],
     xScale: ScaleBand<string> | AnyScale,
     yScale: ScaleBand<string> | AnyScale,
-    layout: BarCommonProps<D>['layout'] = commonDefaultProps.layout,
-    groupMode: BarCommonProps<D>['groupMode'] = commonDefaultProps.groupMode,
+    layout: BarCommonProps<D, I>['layout'] = commonDefaultProps.layout,
+    groupMode: BarCommonProps<D, I>['groupMode'] = commonDefaultProps.groupMode,
     totalsOffset: number,
     formatValue: (value: number) => string
 ) => {
diff --git a/packages/bar/src/hooks.ts b/packages/bar/src/hooks.ts
index dd7cd3db3..063e5ec06 100644
--- a/packages/bar/src/hooks.ts
+++ b/packages/bar/src/hooks.ts
@@ -10,21 +10,26 @@ import {
     LegendData,
     BarLegendProps,
     BarIndex,
+    BarIndexBy,
+    BarBorderColor,
+    BarLabel,
+    BarColors,
+    BarLabelTextColor,
 } from './types'
 import { commonDefaultProps } from './defaults'
 import { generateGroupedBars, generateStackedBars, getLegendData } from './compute'
 import { computeBarTotals } from './compute/totals'
 
 export const useBar = <D extends BarDatum = BarDatum, I extends BarIndex = string>({
-    indexBy = commonDefaultProps.indexBy,
+    indexBy = commonDefaultProps.indexBy as BarIndexBy<D, I>,
     keys = commonDefaultProps.keys,
-    label = commonDefaultProps.label,
-    tooltipLabel = commonDefaultProps.tooltipLabel,
+    label = commonDefaultProps.label as BarLabel<D, I>,
+    tooltipLabel = commonDefaultProps.tooltipLabel as BarLabel<D, I>,
     valueFormat,
-    colors = commonDefaultProps.colors,
+    colors = commonDefaultProps.colors as BarColors<D, I>,
     colorBy = commonDefaultProps.colorBy,
-    borderColor = commonDefaultProps.borderColor,
-    labelTextColor = commonDefaultProps.labelTextColor,
+    borderColor = commonDefaultProps.borderColor as BarBorderColor<D, I>,
+    labelTextColor = commonDefaultProps.labelTextColor as BarLabelTextColor<D, I>,
     groupMode = commonDefaultProps.groupMode,
     layout = commonDefaultProps.layout,
     data,
@@ -88,11 +93,11 @@ export const useBar = <D extends BarDatum = BarDatum, I extends BarIndex = strin
 
     const theme = useTheme()
     const getColor = useOrdinalColorScale(colors, colorBy)
-    const getBorderColor = useInheritedColor<ComputedBarDatumWithValue<D>>(borderColor, theme)
-    const getLabelColor = useInheritedColor<ComputedBarDatumWithValue<D>>(labelTextColor, theme)
+    const getBorderColor = useInheritedColor(borderColor, theme)
+    const getLabelColor = useInheritedColor(labelTextColor, theme)
 
     const generateBars = groupMode === 'grouped' ? generateGroupedBars : generateStackedBars
-    const { bars, xScale, yScale } = generateBars({
+    const { bars, xScale, yScale } = generateBars<D, I>({
         layout,
         data,
         getIndex,
@@ -113,7 +118,7 @@ export const useBar = <D extends BarDatum = BarDatum, I extends BarIndex = strin
     const barsWithValue = useMemo(
         () =>
             bars
-                .filter((bar): bar is ComputedBarDatumWithValue<D> => bar.data.value !== null)
+                .filter((bar): bar is ComputedBarDatumWithValue<D, I> => bar.data.value !== null)
                 .map((bar, index) => ({
                     ...bar,
                     index,
@@ -146,7 +151,7 @@ export const useBar = <D extends BarDatum = BarDatum, I extends BarIndex = strin
     const legendsWithData: [BarLegendProps, LegendData[]][] = useMemo(
         () =>
             legends.map(legend => {
-                const data = getLegendData({
+                const data = getLegendData<D, I>({
                     bars: legend.dataFrom === 'keys' ? legendData : bars,
                     direction: legend.direction,
                     from: legend.dataFrom,
@@ -162,7 +167,16 @@ export const useBar = <D extends BarDatum = BarDatum, I extends BarIndex = strin
     )
 
     const barTotals = useMemo(
-        () => computeBarTotals(bars, xScale, yScale, layout, groupMode, totalsOffset, formatValue),
+        () =>
+            computeBarTotals<D, I>(
+                bars,
+                xScale,
+                yScale,
+                layout,
+                groupMode,
+                totalsOffset,
+                formatValue
+            ),
         [bars, xScale, yScale, layout, groupMode, totalsOffset, formatValue]
     )
 
diff --git a/packages/bar/src/types.ts b/packages/bar/src/types.ts
index d0730478a..62bef6c6c 100644
--- a/packages/bar/src/types.ts
+++ b/packages/bar/src/types.ts
@@ -33,8 +33,30 @@ export type BarIndex = string | number | Date
 export type BarValue = number | null
 // Default datum type for the bar chart.
 export type BarDatum = Record<string, unknown>
-export type BarBorderColor<D extends BarDatum = BarDatum, I extends BarIndex = string> = InheritedColorConfig<ComputedBarDatumWithValue<D, I>>
-export type BarAnnotationMatcher<D extends BarDatum = BarDatum, I extends BarIndex = string> = AnnotationMatcher<ComputedBarDatum<D, I>>
+export type BarIndexBy<
+    D extends BarDatum = BarDatum,
+    I extends BarIndex = string,
+> = PropertyAccessor<D, I>
+export type BarColors<
+    D extends BarDatum = BarDatum,
+    I extends BarIndex = string,
+> = OrdinalColorScaleConfig<ComputedDatum<D, I>>
+export type BarBorderColor<
+    D extends BarDatum = BarDatum,
+    I extends BarIndex = string,
+> = InheritedColorConfig<ComputedBarDatumWithValue<D, I>>
+export type BarLabel<D extends BarDatum = BarDatum, I extends BarIndex = string> = PropertyAccessor<
+    ComputedBarDatum<D, I>,
+    string
+>
+export type BarLabelTextColor<
+    D extends BarDatum = BarDatum,
+    I extends BarIndex = string,
+> = InheritedColorConfig<ComputedBarDatumWithValue<D, I>>
+export type BarAnnotationMatcher<
+    D extends BarDatum = BarDatum,
+    I extends BarIndex = string,
+> = AnnotationMatcher<ComputedBarDatum<D, I>>
 
 export interface DataProps<D extends BarDatum> {
     data: readonly D[]
@@ -74,20 +96,22 @@ export type ComputedBarDatum<D extends BarDatum = BarDatum, I extends BarIndex =
     label: string
 }
 
-export type BarsWithHidden<D extends BarDatum = BarDatum, I extends BarIndex = string> = Array<
-    Partial<{
-        key: string
-        x: number
-        y: number
-        width: number
-        height: number
-        color: string
-    }> & {
-        data: Partial<ComputedDatum<D, I>> & {
-            id: string | number
-            hidden: boolean
+export type BarsWithHidden<D extends BarDatum = BarDatum, I extends BarIndex = string> = Readonly<
+    Array<
+        Partial<{
+            key: string
+            x: number
+            y: number
+            width: number
+            height: number
+            color: string
+        }> & {
+            data: Partial<ComputedDatum<D, I>> & {
+                id: string | number
+                hidden: boolean
+            }
         }
-    }
+    >
 >
 
 export type LegendLabelDatum<D extends BarDatum = BarDatum, I extends BarIndex = string> = Partial<
@@ -252,7 +276,7 @@ export type BarInteractionHandlers<
 > = InteractionHandlers<ComputedDatum<D, I>, BarEventMap>
 
 export type BarCommonProps<D extends BarDatum = BarDatum, I extends BarIndex = string> = {
-    indexBy: PropertyAccessor<D, I>
+    indexBy: BarIndexBy<D, I>
     keys: readonly string[]
     margin?: Box
     innerPadding: number
@@ -267,22 +291,22 @@ export type BarCommonProps<D extends BarDatum = BarDatum, I extends BarIndex = s
     borderRadius: number
     borderWidth: number
     enableLabel: boolean
-    label: PropertyAccessor<ComputedDatum<D, I>, string>
+    label: BarLabel<D, I>
     labelPosition: 'start' | 'middle' | 'end'
     labelOffset: number
     labelFormat?: string | LabelFormatter
     labelSkipWidth: number
     labelSkipHeight: number
-    labelTextColor: InheritedColorConfig<ComputedBarDatumWithValue<D, I>>
+    labelTextColor: BarLabelTextColor<D, I>
     isInteractive: boolean
     tooltip: BarTooltipComponent<D, I>
     valueFormat?: ValueFormat<number>
     legendLabel?: PropertyAccessor<LegendLabelDatum<D, I>, string>
-    tooltipLabel: PropertyAccessor<ComputedDatum<D, I>, string>
+    tooltipLabel: BarLabel<D, I>
     groupMode: 'grouped' | 'stacked'
     layout: 'horizontal' | 'vertical'
     colorBy: 'id' | 'indexValue'
-    colors: OrdinalColorScaleConfig<ComputedDatum<D, I>>
+    colors: BarColors<D, I>
     theme: PartialTheme
     annotations: readonly AnnotationMatcher<ComputedBarDatum<D, I>>[]
     legends: readonly BarLegendProps[]