feat(bar): improve default props casting

Author: plouc

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,

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,

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}`,

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>[]
 }