feat(colors): update package typings according to TypeScript migration

packages/bar/index.d.ts

@@ -16,7 +16,7 @@ import {
     CartesianMarkerProps,
 } from '@nivo/core'
 import { AxisProps, GridValues } from '@nivo/axes'
-import { OrdinalColorsInstruction, InheritedColor } from '@nivo/colors'
+import { OrdinalColorScaleConfig, InheritedColorConfig } from '@nivo/colors'
 import { LegendProps } from '@nivo/legends'
 import { Scale } from '@nivo/scales'
 
@@ -115,13 +115,13 @@ declare module '@nivo/bar' {
         enableLabel: boolean
         label: string | AccessorFunc
         labelFormat: string | LabelFormatter
-        labelLinkColor: InheritedColor<BarDatumWithColor>
+        labelLinkColor: InheritedColorConfig<BarDatumWithColor>
         labelSkipWidth: number
         labelSkipHeight: number
-        labelTextColor: InheritedColor<BarDatumWithColor>
+        labelTextColor: InheritedColorConfig<BarDatumWithColor>
 
-        colors: OrdinalColorsInstruction
-        borderColor: InheritedColor<BarDatumWithColor>
+        colors: OrdinalColorScaleConfig
+        borderColor: InheritedColorConfig<BarDatumWithColor>
         borderRadius: number
         borderWidth: number
         theme: Theme

packages/bump/index.d.ts

@@ -8,7 +8,7 @@
  */
 import { Component, MouseEvent } from 'react'
 import { Dimensions, Box, Theme, MotionProps, SvgDefsAndFill, CssMixBlendMode } from '@nivo/core'
-import { OrdinalColorsInstruction, InheritedColor } from '@nivo/colors'
+import { OrdinalColorScaleConfig, InheritedColorConfig } from '@nivo/colors'
 
 declare module '@nivo/bump' {
     type SerieDerivedProp<Serie, T> = (serie: Serie) => T
@@ -42,23 +42,23 @@ declare module '@nivo/bump' {
         xPadding?: number
 
         theme?: Theme
-        colors?: OrdinalColorsInstruction
+        colors?: OrdinalColorScaleConfig
 
         startLabel?: BumpLabel
         startLabelPadding?: number
-        startLabelTextColor?: InheritedColor
+        startLabelTextColor?: InheritedColorConfig
         endLabel?: BumpLabel
         endLabelPadding?: number
-        endLabelTextColor?: InheritedColor
+        endLabelTextColor?: InheritedColorConfig
 
         pointSize?: number
         activePointSize?: number
         inactivePointSize?: number
-        pointColor?: InheritedColor
+        pointColor?: InheritedColorConfig
         pointBorderWidth?: number
         activePointBorderWidth?: number
         inactivePointBorderWidth?: number
-        pointBorderColor?: InheritedColor
+        pointBorderColor?: InheritedColorConfig
 
         enableGridX?: boolean
         enableGridY?: boolean
@@ -141,25 +141,25 @@ declare module '@nivo/bump' {
         xPadding?: number
 
         theme?: Theme
-        colors?: OrdinalColorsInstruction
+        colors?: OrdinalColorScaleConfig
         blendMode?: CssMixBlendMode
         fillOpacity?: number | SerieDerivedProp<AreaBumpInputSerie, number>
         activeFillOpacity?: number | SerieDerivedProp<AreaBumpInputSerie, number>
         inactiveFillOpacity?: number | SerieDerivedProp<AreaBumpInputSerie, number>
         borderWidth?: number | SerieDerivedProp<AreaBumpInputSerie, number>
         activeBorderWidth?: number | SerieDerivedProp<AreaBumpInputSerie, number>
         inactiveBorderWidth?: number | SerieDerivedProp<AreaBumpInputSerie, number>
-        borderColor?: InheritedColor
+        borderColor?: InheritedColorConfig
         borderOpacity?: number | SerieDerivedProp<AreaBumpInputSerie, number>
         activeBorderOpacity?: number | SerieDerivedProp<AreaBumpInputSerie, number>
         inactiveBorderOpacity?: number | SerieDerivedProp<AreaBumpInputSerie, number>
 
         startLabel?: AreaBumpLabel
         startLabelPadding?: number
-        startLabelTextColor?: InheritedColor
+        startLabelTextColor?: InheritedColorConfig
         endLabel?: AreaBumpLabel
         endLabelPadding?: number
-        endLabelTextColor?: InheritedColor
+        endLabelTextColor?: InheritedColorConfig
 
         enableGridX?: boolean
         axisTop?: any

packages/chord/index.d.ts

@@ -8,7 +8,7 @@
  */
 import { Component } from 'react'
 import { Box, MotionProps, Dimensions, Theme } from '@nivo/core'
-import { OrdinalColorsInstruction, InheritedColor } from '@nivo/colors'
+import { OrdinalColorScaleConfig, InheritedColorConfig } from '@nivo/colors'
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
 
@@ -55,14 +55,14 @@ declare module '@nivo/chord' {
 
         layers: any[]
 
-        colors?: OrdinalColorsInstruction
+        colors?: OrdinalColorScaleConfig
         theme?: Theme
 
         arcOpacity?: number
         arcHoverOpacity?: number
         arcHoverOthersOpacity?: number
         arcBorderWidth?: number
-        arcBorderColor?: InheritedColor
+        arcBorderColor?: InheritedColorConfig
         onArcMouseEnter?: ChordArcMouseHandler
         onArcMouseMove?: ChordArcMouseHandler
         onArcMouseLeave?: ChordArcMouseHandler
@@ -73,12 +73,12 @@ declare module '@nivo/chord' {
         ribbonHoverOpacity?: number
         ribbonHoverOthersOpacity?: number
         ribbonBorderWidth?: number
-        BorderColor?: InheritedColor
+        BorderColor?: InheritedColorConfig
 
         enableLabel?: boolean
         labelOffset?: number
         labelRotation?: number
-        labelTextColor?: InheritedColor
+        labelTextColor?: InheritedColorConfig
 
         isInteractive?: boolean
     }

packages/colors/src/ordinalColorScale.ts

@@ -45,7 +45,7 @@ export interface OrdinalColorScaleConfigDatumProperty {
     datum: string
 }
 
-export type OrdinalColorScaleConfig<Datum> =
+export type OrdinalColorScaleConfig<Datum = any> =
     | OrdinalColorScaleConfigStaticColor
     | OrdinalColorScaleConfigCustomFunction<Datum>
     | OrdinalColorScaleConfigScheme

packages/funnel/index.d.ts

@@ -8,7 +8,7 @@
  */
 import * as React from 'react'
 import { Dimensions, Box, Theme, MotionProps } from '@nivo/core'
-import { OrdinalColorsInstruction, InheritedColor } from '@nivo/colors'
+import { OrdinalColorScaleConfig, InheritedColorConfig } from '@nivo/colors'
 
 declare module '@nivo/funnel' {
     export interface Position {
@@ -89,14 +89,14 @@ declare module '@nivo/funnel' {
         shapeBlending?: number
 
         theme?: Theme
-        colors?: OrdinalColorsInstruction
+        colors?: OrdinalColorScaleConfig
 
         borderWidth?: number
-        borderColor?: InheritedColor<Omit<Part, 'borderColor' | 'labelColor'>>
+        borderColor?: InheritedColorConfig<Omit<Part, 'borderColor' | 'labelColor'>>
         borderOpacity?: number
 
         enableLabel?: boolean
-        labelColor?: InheritedColor<Omit<Part, 'labelColor'>>
+        labelColor?: InheritedColorConfig<Omit<Part, 'labelColor'>>
 
         enableBeforeSeparators?: boolean
         beforeSeparatorLength?: number

packages/heatmap/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { Dimensions, Box, MotionProps, ColorProps, Theme } from '@nivo/core'
 import { AxisProps } from '@nivo/axes'
-import { InheritedColor } from '@nivo/colors'
+import { InheritedColorConfig } from '@nivo/colors'
 import { BasicTooltipProps } from '@nivo/tooltip'
 
 declare module '@nivo/heatmap' {
@@ -35,7 +35,7 @@ declare module '@nivo/heatmap' {
             cellShape: 'rect' | 'circle' | React.StatelessComponent<any>
             cellOpacity: number
             cellBorderWidth: number
-            cellBorderColor: InheritedColor<HeatMapDatumWithColor>
+            cellBorderColor: InheritedColorConfig<HeatMapDatumWithColor>
 
             axisTop: AxisProps | null
             axisRight: AxisProps | null
@@ -46,7 +46,7 @@ declare module '@nivo/heatmap' {
             enableGridY: boolean
 
             enableLabels: boolean
-            labelTextColor: InheritedColor<HeatMapDatumWithColor>
+            labelTextColor: InheritedColorConfig<HeatMapDatumWithColor>
 
             isInteractive: boolean
             hoverTarget: 'cell' | 'row' | 'column' | 'rowColumn'

packages/line/index.d.ts

@@ -17,7 +17,7 @@ import {
     DataFormatter,
     DatumValue as CoreDatumValue,
 } from '@nivo/core'
-import { OrdinalColorsInstruction } from '@nivo/colors'
+import { OrdinalColorScaleConfig } from '@nivo/colors'
 import { LegendProps } from '@nivo/legends'
 import { Scale, ScaleFunc } from '@nivo/scales'
 import { AxisProps, GridValues } from '@nivo/axes'
@@ -154,7 +154,7 @@ declare module '@nivo/line' {
 
         lineWidth?: number
 
-        colors?: OrdinalColorsInstruction
+        colors?: OrdinalColorScaleConfig
         theme?: Theme
 
         axisTop?: AxisProps | null

packages/network/index.d.ts

@@ -8,7 +8,7 @@
  */
 import * as React from 'react'
 import { Dimensions, Box, Theme, MotionProps } from '@nivo/core'
-import { InheritedColor } from '@nivo/colors'
+import { InheritedColorConfig } from '@nivo/colors'
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
 
@@ -67,10 +67,10 @@ declare module '@nivo/network' {
 
         nodeColor: string | NodeAccessor<ComputedNode, string>
         nodeBorderWidth?: number
-        nodeBorderColor?: InheritedColor<ComputedNode>
+        nodeBorderColor?: InheritedColorConfig<ComputedNode>
 
         linkThickness?: number | LinkAccessor<ComputedLink, number>
-        linkColor?: InheritedColor<ComputedLink>
+        linkColor?: InheritedColorConfig<ComputedLink>
 
         theme?: Theme
 

packages/pie/src/Pie.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode, Fragment, createElement } from 'react'
 // @ts-ignore
 import { withContainer, SvgWrapper, bindDefs, useTheme, useDimensions } from '@nivo/core'
-import { useInheritedColor, InheritedColor } from '@nivo/colors'
+import { useInheritedColor, InheritedColorConfig } from '@nivo/colors'
 import { PieSlice } from './PieSlice'
 import { RadialLabels } from './RadialLabels'
 import { SliceLabels } from './SliceLabels'
@@ -35,7 +35,7 @@ const Pie = <RawDatum, >({
 
     // border
     borderWidth = defaultProps.borderWidth,
-    borderColor: _borderColor = defaultProps.borderColor as InheritedColor<ComputedDatum<RawDatum>>,
+    borderColor: _borderColor = defaultProps.borderColor as InheritedColorConfig<ComputedDatum<RawDatum>>,
 
     // radial labels
     radialLabel = defaultProps.radialLabel,

packages/pie/src/PieCanvas.tsx

@@ -16,7 +16,7 @@ import {
 } from '@nivo/core'
 // @ts-ignore
 import { renderLegendToCanvas } from '@nivo/legends'
-import { useInheritedColor, InheritedColor } from '@nivo/colors'
+import { useInheritedColor, InheritedColorConfig } from '@nivo/colors'
 // @ts-ignore
 import { useTooltip } from '@nivo/tooltip'
 import { useNormalizedData, usePieFromBox, usePieRadialLabels, usePieSliceLabels } from './hooks'
@@ -95,7 +95,7 @@ const PieCanvas = <RawDatum, >({
 
     // border
     borderWidth = defaultProps.borderWidth,
-    borderColor = defaultProps.borderColor as InheritedColor<ComputedDatum<RawDatum>>,
+    borderColor = defaultProps.borderColor as InheritedColorConfig<ComputedDatum<RawDatum>>,
 
     // radial labels
     radialLabel = defaultProps.radialLabel,

packages/pie/src/hooks.ts

@@ -25,11 +25,10 @@ import {
     absoluteAngleDegrees,
 } from '@nivo/core'
 import {
-    // @ts-ignore
-    getOrdinalColorScale,
+    OrdinalColorScaleConfig,
+    useOrdinalColorScale,
+    InheritedColorConfig,
     useInheritedColor,
-    OrdinalColorsInstruction,
-    InheritedColor,
 } from '@nivo/colors'
 import { defaultProps } from './props'
 import {
@@ -56,7 +55,9 @@ export const useNormalizedData = <RawDatum extends MayHaveLabel>({
     id = defaultProps.id,
     value = defaultProps.value,
     valueFormat,
-    colors = defaultProps.colors as OrdinalColorsInstruction,
+    colors = defaultProps.colors as OrdinalColorScaleConfig<
+        Omit<ComputedDatum<RawDatum>, 'arc' | 'color' | 'fill'>
+    >,
 }: Pick<CompletePieSvgProps<RawDatum>, 'id' | 'value' | 'valueFormat' | 'colors'> & {
     data: RawDatum[]
 }): Omit<ComputedDatum<RawDatum>, 'arc' | 'fill'>[] => {
@@ -67,7 +68,10 @@ export const useNormalizedData = <RawDatum extends MayHaveLabel>({
     )
     const formatValue = useValueFormatter(valueFormat as any)
 
-    const getColor = useMemo(() => getOrdinalColorScale(colors, 'id'), [colors])
+    const getColor = useOrdinalColorScale<Omit<ComputedDatum<RawDatum>, 'arc' | 'color' | 'fill'>>(
+        colors,
+        'id'
+    )
 
     return useMemo(
         () =>
@@ -320,7 +324,7 @@ export const usePieSliceLabels = <RawDatum>({
     innerRadius: number
     radiusOffset: number
     label: string | LabelAccessorFunction<RawDatum>
-    textColor: InheritedColor<ComputedDatum<RawDatum>>
+    textColor: InheritedColorConfig<ComputedDatum<RawDatum>>
 }): SliceLabelData<RawDatum>[] => {
     const theme = useTheme()
     const getTextColor = useInheritedColor<ComputedDatum<RawDatum>>(textColor, theme)
@@ -364,13 +368,13 @@ export const usePieRadialLabels = <RawDatum>({
     dataWithArc: ComputedDatum<RawDatum>[]
     label: string | LabelAccessorFunction<RawDatum>
     textXOffset: number
-    textColor: InheritedColor<ComputedDatum<RawDatum>>
+    textColor: InheritedColorConfig<ComputedDatum<RawDatum>>
     radius: number
     skipAngle: number
     linkOffset: number
     linkDiagonalLength: number
     linkHorizontalLength: number
-    linkColor: InheritedColor<ComputedDatum<RawDatum>>
+    linkColor: InheritedColorConfig<ComputedDatum<RawDatum>>
 }): RadialLabelData<RawDatum>[] => {
     const getLabel = useMemo(() => getLabelGenerator(label), [label])
 

packages/pie/src/props.ts

@@ -1,4 +1,4 @@
-import { OrdinalColorsInstruction } from '@nivo/colors'
+import { OrdinalColorScaleConfig } from '@nivo/colors'
 import { PieTooltip } from './PieTooltip'
 
 export const defaultProps = {
@@ -43,7 +43,7 @@ export const defaultProps = {
     sliceLabelsTextColor: { theme: 'labels.text.fill' },
 
     // styling
-    colors: ({ scheme: 'nivo' } as unknown) as OrdinalColorsInstruction,
+    colors: ({ scheme: 'nivo' } as unknown) as OrdinalColorScaleConfig,
     defs: [],
     fill: [],
 

packages/pie/src/types.ts

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Box, Dimensions, Theme, SvgDefsAndFill } from '@nivo/core'
-import { OrdinalColorsInstruction, InheritedColor } from '@nivo/colors'
+import { OrdinalColorScaleConfig, InheritedColorConfig } from '@nivo/colors'
 import { LegendProps } from '@nivo/legends'
 
 export type DatumId = string | number
@@ -89,29 +89,29 @@ export type CommonPieProps<RawDatum> = {
     fit: boolean
 
     // colors, theme and border
-    colors: OrdinalColorsInstruction<Omit<ComputedDatum<RawDatum>, 'color' | 'fill'>>
+    colors: OrdinalColorScaleConfig<Omit<ComputedDatum<RawDatum>, 'color' | 'fill' | 'arc'>>
     theme: Theme
     borderWidth: number
-    borderColor: InheritedColor<ComputedDatum<RawDatum>>
+    borderColor: InheritedColorConfig<ComputedDatum<RawDatum>>
 
     // radial labels
     enableRadialLabels: boolean
     radialLabel: string | LabelAccessorFunction<RawDatum>
     radialLabelsSkipAngle: number
     radialLabelsTextXOffset: number
-    radialLabelsTextColor: InheritedColor<ComputedDatum<RawDatum>>
+    radialLabelsTextColor: InheritedColorConfig<ComputedDatum<RawDatum>>
     radialLabelsLinkOffset: number
     radialLabelsLinkDiagonalLength: number
     radialLabelsLinkHorizontalLength: number
     radialLabelsLinkStrokeWidth: number
-    radialLabelsLinkColor: InheritedColor<ComputedDatum<RawDatum>>
+    radialLabelsLinkColor: InheritedColorConfig<ComputedDatum<RawDatum>>
 
     // slices labels
     enableSliceLabels: boolean
     sliceLabel: string | LabelAccessorFunction<RawDatum>
     sliceLabelsRadiusOffset: number
     sliceLabelsSkipAngle: number
-    sliceLabelsTextColor: InheritedColor<ComputedDatum<RawDatum>>
+    sliceLabelsTextColor: InheritedColorConfig<ComputedDatum<RawDatum>>
 
     // interactivity
     isInteractive: boolean