Various TypeScript fixes across several packages (plouc#802)

- Correct types for sankey node and link tooltips - Update legend data prop from value to label - Add BoxLegendSvg to export - Add useValueFormatter export
vhmartinezm · May 16, 2020 · 0bb895f · 0bb895f
1 parent f2816f4
commit 0bb895f
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 37 deletions.
diff --git a/packages/core/index.d.ts b/packages/core/index.d.ts
@@ -2,6 +2,8 @@ import * as React from 'react'
 import { number } from 'prop-types'
 
 declare module '@nivo/core' {
+    export type DatumValue = string | number | Date
+
     export interface Dimensions {
         height: number
         width: number
@@ -36,9 +38,9 @@ declare module '@nivo/core' {
     export type Theme = Partial<{
         crosshair: Partial<{
             line: Partial<{
-                stroke: string,
-                strokeWidth: number,
-                strokeOpacity: number,
+                stroke: string
+                strokeWidth: number
+                strokeOpacity: number
                 strokeDasharray: string
             }>
         }>
@@ -138,4 +140,8 @@ declare module '@nivo/core' {
         | 'step'
         | 'stepAfter'
         | 'stepBefore'
+
+    type DataFormatter = (value: DatumValue) => string | number
+
+    export function useValueFormatter(formatter?: DataFormatter | string): DataFormatter
 }
diff --git a/packages/legends/index.d.ts b/packages/legends/index.d.ts
@@ -1,6 +1,11 @@
 import * as React from 'react'
 
 declare module '@nivo/legends' {
+    interface ContainerDimensions {
+        containerHeight: number
+        containerWidth: number
+    }
+
     export type LegendAnchor =
         | 'top'
         | 'top-right'
@@ -55,7 +60,7 @@ declare module '@nivo/legends' {
     export interface LegendProps {
         data?: Array<{
             id: string | number
-            value: number
+            label: string | number
             color?: string
             fill?: string
         }>
@@ -93,4 +98,6 @@ declare module '@nivo/legends' {
     }
 
     export type QuantileLegendSvg = React.FunctionComponent<QuantileLegendProps>
+
+    export const BoxLegendSvg: React.FC<LegendProps & ContainerDimensions>
 }
diff --git a/packages/line/index.d.ts b/packages/line/index.d.ts
@@ -7,7 +7,15 @@
  * file that was distributed with this source code.
  */
 import * as React from 'react'
-import { Dimensions, Box, Theme, MotionProps, CartesianMarkerProps } from '@nivo/core'
+import {
+    Dimensions,
+    Box,
+    Theme,
+    MotionProps,
+    CartesianMarkerProps,
+    DataFormatter,
+    DatumValue as CoreDatumValue,
+} from '@nivo/core'
 import { OrdinalColorsInstruction } from '@nivo/colors'
 import { LegendProps } from '@nivo/legends'
 import { Scale, ScaleFunc } from '@nivo/scales'
@@ -17,7 +25,7 @@ import { CrosshairType } from '@nivo/tooltip'
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
 
 declare module '@nivo/line' {
-    export type DatumValue = string | number | Date
+    export type DatumValue = CoreDatumValue
 
     export interface Datum {
         x?: DatumValue | null
@@ -64,8 +72,6 @@ declare module '@nivo/line' {
     export type CustomLayer = (props: CustomLayerProps) => React.ReactNode
     export type Layer = LineLayerType | CustomLayer
 
-    export type DataFormatter = (value: DatumValue) => string | number
-
     export interface Point {
         id: string
         index: number
@@ -86,8 +92,6 @@ declare module '@nivo/line' {
 
     export type PointMouseHandler = (point: Point, event: React.MouseEvent) => void
 
-    export type TooltipFormatter = (value: DatumValue) => React.ReactNode
-
     export interface PointTooltipProps {
         point: Point
     }
@@ -180,7 +184,7 @@ declare module '@nivo/line' {
         debugSlices?: boolean
         sliceTooltip?: SliceTooltip
 
-        tooltipFormat?: TooltipFormatter | string
+        tooltipFormat?: DataFormatter | string
         tooltip?: PointTooltip
 
         enableCrosshair?: boolean

diff --git a/packages/sankey/index.d.ts b/packages/sankey/index.d.ts
@@ -31,30 +31,6 @@ declare module '@nivo/sankey' {
         }
     }
 
-    export interface SankeyLinkProps {
-        source: {
-            id?: string | number
-            label: string | number
-        }
-        target: {
-            id?: string | number
-            label: string | number
-        }
-        thickness: number
-        color: string
-        value: number
-    }
-
-    export interface SankeyNodeProps {
-        id: string | number
-        x: number
-        y: number
-        width: number
-        height: number
-        label: string
-        color: string
-    }
-
     export interface SankeyLinkDatum {
         color: string
         index: number
@@ -134,8 +110,8 @@ declare module '@nivo/sankey' {
         isInteractive: boolean
         onClick: SankeyMouseHandler
         tooltipFormat: TooltipFormat
-        nodeTooltip: TooltipRenderer<SankeyNodeProps>
-        linkTooltip: TooltipRenderer<SankeyLinkProps>
+        nodeTooltip: TooltipRenderer<SankeyNodeDatum>
+        linkTooltip: TooltipRenderer<SankeyLinkDatum>
 
         colors: OrdinalColorsInstruction
         theme: Theme