feat(colors): rename InheritedColorProp to InheritedColor in all pack…

…age typings

packages/annotations/index.d.ts

@@ -8,7 +8,6 @@
  */
 import { Component, ReactNode } from 'react'
 import { MotionProps } from '@nivo/core'
-import { OrdinalColorsInstruction, InheritedColorProp } from '@nivo/colors'
 
 declare module '@nivo/annotations' {
     export type AnnotationType = 'circle' | 'dot' | 'rect'

packages/bar/index.d.ts

@@ -16,7 +16,7 @@ import {
     CartesianMarkerProps,
 } from '@nivo/core'
 import { AxisProps, GridValues } from '@nivo/axes'
-import { OrdinalColorsInstruction, InheritedColorProp } from '@nivo/colors'
+import { OrdinalColorsInstruction, InheritedColor } 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: InheritedColorProp<BarDatumWithColor>
+        labelLinkColor: InheritedColor<BarDatumWithColor>
         labelSkipWidth: number
         labelSkipHeight: number
-        labelTextColor: InheritedColorProp<BarDatumWithColor>
+        labelTextColor: InheritedColor<BarDatumWithColor>
 
         colors: OrdinalColorsInstruction
-        borderColor: InheritedColorProp<BarDatumWithColor>
+        borderColor: InheritedColor<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, InheritedColorProp } from '@nivo/colors'
+import { OrdinalColorsInstruction, InheritedColor } from '@nivo/colors'
 
 declare module '@nivo/bump' {
     type SerieDerivedProp<Serie, T> = (serie: Serie) => T
@@ -46,19 +46,19 @@ declare module '@nivo/bump' {
 
         startLabel?: BumpLabel
         startLabelPadding?: number
-        startLabelTextColor?: InheritedColorProp
+        startLabelTextColor?: InheritedColor
         endLabel?: BumpLabel
         endLabelPadding?: number
-        endLabelTextColor?: InheritedColorProp
+        endLabelTextColor?: InheritedColor
 
         pointSize?: number
         activePointSize?: number
         inactivePointSize?: number
-        pointColor?: InheritedColorProp
+        pointColor?: InheritedColor
         pointBorderWidth?: number
         activePointBorderWidth?: number
         inactivePointBorderWidth?: number
-        pointBorderColor?: InheritedColorProp
+        pointBorderColor?: InheritedColor
 
         enableGridX?: boolean
         enableGridY?: boolean
@@ -149,17 +149,17 @@ declare module '@nivo/bump' {
         borderWidth?: number | SerieDerivedProp<AreaBumpInputSerie, number>
         activeBorderWidth?: number | SerieDerivedProp<AreaBumpInputSerie, number>
         inactiveBorderWidth?: number | SerieDerivedProp<AreaBumpInputSerie, number>
-        borderColor?: InheritedColorProp
+        borderColor?: InheritedColor
         borderOpacity?: number | SerieDerivedProp<AreaBumpInputSerie, number>
         activeBorderOpacity?: number | SerieDerivedProp<AreaBumpInputSerie, number>
         inactiveBorderOpacity?: number | SerieDerivedProp<AreaBumpInputSerie, number>
 
         startLabel?: AreaBumpLabel
         startLabelPadding?: number
-        startLabelTextColor?: InheritedColorProp
+        startLabelTextColor?: InheritedColor
         endLabel?: AreaBumpLabel
         endLabelPadding?: number
-        endLabelTextColor?: InheritedColorProp
+        endLabelTextColor?: InheritedColor
 
         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, InheritedColorProp } from '@nivo/colors'
+import { OrdinalColorsInstruction, InheritedColor } from '@nivo/colors'
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
 
@@ -62,7 +62,7 @@ declare module '@nivo/chord' {
         arcHoverOpacity?: number
         arcHoverOthersOpacity?: number
         arcBorderWidth?: number
-        arcBorderColor?: InheritedColorProp
+        arcBorderColor?: InheritedColor
         onArcMouseEnter?: ChordArcMouseHandler
         onArcMouseMove?: ChordArcMouseHandler
         onArcMouseLeave?: ChordArcMouseHandler
@@ -73,12 +73,12 @@ declare module '@nivo/chord' {
         ribbonHoverOpacity?: number
         ribbonHoverOthersOpacity?: number
         ribbonBorderWidth?: number
-        BorderColor?: InheritedColorProp
+        BorderColor?: InheritedColor
 
         enableLabel?: boolean
         labelOffset?: number
         labelRotation?: number
-        labelTextColor?: InheritedColorProp
+        labelTextColor?: InheritedColor
 
         isInteractive?: boolean
     }

packages/colors/package.json

@@ -23,14 +23,14 @@
     "d3-color": "^2.0.0",
     "d3-scale": "^3.0.0",
     "d3-scale-chromatic": "^2.0.0",
-    "lodash.get": "^4.4.2",
-    "lodash.isplainobject": "^4.0.6",
+    "lodash": "^4.17.11",
     "react-motion": "^0.5.2"
   },
   "devDependencies": {
     "@nivo/core": "*",
     "@types/d3-color": "^2.0.0",
     "@types/d3-scale-chromatic": "^2.0.0",
+    "@types/lodash": "^4.14.149",
     "@types/react-motion": "^0.0.29"
   },
   "peerDependencies": {

packages/funnel/index.d.ts

@@ -8,7 +8,7 @@
  */
 import * as React from 'react'
 import { Dimensions, Box, Theme, MotionProps } from '@nivo/core'
-import { OrdinalColorsInstruction, InheritedColorProp } from '@nivo/colors'
+import { OrdinalColorsInstruction, InheritedColor } from '@nivo/colors'
 
 declare module '@nivo/funnel' {
     export interface Position {
@@ -92,11 +92,11 @@ declare module '@nivo/funnel' {
         colors?: OrdinalColorsInstruction
 
         borderWidth?: number
-        borderColor?: InheritedColorProp<Omit<Part, 'borderColor' | 'labelColor'>>
+        borderColor?: InheritedColor<Omit<Part, 'borderColor' | 'labelColor'>>
         borderOpacity?: number
 
         enableLabel?: boolean
-        labelColor?: InheritedColorProp<Omit<Part, 'labelColor'>>
+        labelColor?: InheritedColor<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 { InheritedColorProp } from '@nivo/colors'
+import { InheritedColor } 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: InheritedColorProp<HeatMapDatumWithColor>
+            cellBorderColor: InheritedColor<HeatMapDatumWithColor>
 
             axisTop: AxisProps | null
             axisRight: AxisProps | null
@@ -46,7 +46,7 @@ declare module '@nivo/heatmap' {
             enableGridY: boolean
 
             enableLabels: boolean
-            labelTextColor: InheritedColorProp<HeatMapDatumWithColor>
+            labelTextColor: InheritedColor<HeatMapDatumWithColor>
 
             isInteractive: boolean
             hoverTarget: 'cell' | 'row' | 'column' | 'rowColumn'

packages/network/index.d.ts

@@ -8,7 +8,7 @@
  */
 import * as React from 'react'
 import { Dimensions, Box, Theme, MotionProps } from '@nivo/core'
-import { InheritedColorProp } from '@nivo/colors'
+import { InheritedColor } 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?: InheritedColorProp<ComputedNode>
+        nodeBorderColor?: InheritedColor<ComputedNode>
 
         linkThickness?: number | LinkAccessor<ComputedLink, number>
-        linkColor?: InheritedColorProp<ComputedLink>
+        linkColor?: InheritedColor<ComputedLink>
 
         theme?: Theme
 

packages/pie/src/Pie.tsx

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

packages/pie/src/PieCanvas.tsx

@@ -16,11 +16,7 @@ import {
 } from '@nivo/core'
 // @ts-ignore
 import { renderLegendToCanvas } from '@nivo/legends'
-import {
-    // @ts-ignore
-    useInheritedColor,
-    InheritedColorProp,
-} from '@nivo/colors'
+import { useInheritedColor, InheritedColor } from '@nivo/colors'
 // @ts-ignore
 import { useTooltip } from '@nivo/tooltip'
 import { useNormalizedData, usePieFromBox, usePieRadialLabels, usePieSliceLabels } from './hooks'
@@ -99,7 +95,7 @@ const PieCanvas = <RawDatum, >({
 
     // border
     borderWidth = defaultProps.borderWidth,
-    borderColor = defaultProps.borderColor as InheritedColorProp<ComputedDatum<RawDatum>>,
+    borderColor = defaultProps.borderColor as InheritedColor<ComputedDatum<RawDatum>>,
 
     // radial labels
     radialLabel = defaultProps.radialLabel,
@@ -158,7 +154,7 @@ const PieCanvas = <RawDatum, >({
         cornerRadius,
     })
 
-    const getBorderColor = useInheritedColor(borderColor, theme)
+    const getBorderColor = useInheritedColor<ComputedDatum<RawDatum>>(borderColor, theme)
 
     const radialLabels = usePieRadialLabels<RawDatum>({
         enable: enableRadialLabels,

packages/pie/src/hooks.ts

@@ -27,10 +27,9 @@ import {
 import {
     // @ts-ignore
     getOrdinalColorScale,
-    // @ts-ignore
     useInheritedColor,
     OrdinalColorsInstruction,
-    InheritedColorProp,
+    InheritedColor,
 } from '@nivo/colors'
 import { defaultProps } from './props'
 import {
@@ -321,10 +320,10 @@ export const usePieSliceLabels = <RawDatum>({
     innerRadius: number
     radiusOffset: number
     label: string | LabelAccessorFunction<RawDatum>
-    textColor: InheritedColorProp<ComputedDatum<RawDatum>>
+    textColor: InheritedColor<ComputedDatum<RawDatum>>
 }): SliceLabelData<RawDatum>[] => {
     const theme = useTheme()
-    const getTextColor = useInheritedColor(textColor, theme)
+    const getTextColor = useInheritedColor<ComputedDatum<RawDatum>>(textColor, theme)
     const getLabel = useMemo(() => getLabelGenerator(label), [label])
 
     return useMemo(() => {
@@ -365,19 +364,19 @@ export const usePieRadialLabels = <RawDatum>({
     dataWithArc: ComputedDatum<RawDatum>[]
     label: string | LabelAccessorFunction<RawDatum>
     textXOffset: number
-    textColor: InheritedColorProp<ComputedDatum<RawDatum>>
+    textColor: InheritedColor<ComputedDatum<RawDatum>>
     radius: number
     skipAngle: number
     linkOffset: number
     linkDiagonalLength: number
     linkHorizontalLength: number
-    linkColor: InheritedColorProp<ComputedDatum<RawDatum>>
+    linkColor: InheritedColor<ComputedDatum<RawDatum>>
 }): RadialLabelData<RawDatum>[] => {
     const getLabel = useMemo(() => getLabelGenerator(label), [label])
 
     const theme = useTheme()
-    const getTextColor = useInheritedColor(textColor, theme)
-    const getLinkColor = useInheritedColor(linkColor, theme)
+    const getTextColor = useInheritedColor<ComputedDatum<RawDatum>>(textColor, theme)
+    const getLinkColor = useInheritedColor<ComputedDatum<RawDatum>>(linkColor, theme)
 
     return useMemo(() => {
         if (!enable) return []

packages/pie/src/types.ts

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