feat(treemap): add TypeScript definitions

plouc · Jun 26, 2020 · f1d9a3b · f1d9a3b
1 parent 5ff360e
commit f1d9a3b
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 5 deletions.
diff --git a/packages/treemap/index.d.ts b/packages/treemap/index.d.ts
@@ -7,13 +7,103 @@
  * file that was distributed with this source code.
  */
 import * as React from 'react'
-import { Dimensions } from '@nivo/core'
+import { Dimensions, Box, Theme } from '@nivo/core'
+import { OrdinalColorInstruction, InheritedColorProp } from '@nivo/colors'
 
 declare module '@nivo/treemap' {
+    export type TreeMapTile = 'binary' | 'squarify' | 'slice' | 'dice' | 'sliceDice' | 'resquarify'
+
+    export interface TreeMapNodeDatum {
+        id: string
+        path: string
+        pathComponents: string[]
+        data: any
+        x: number
+        y: number
+        width: number
+        height: number
+        value: number
+        formattedValue: number | string
+        treeDepth: number
+        treeHeight: number
+        isParent: boolean
+        isLeaf: boolean
+        label: string | number
+        parentLabel: string | number
+        color: string
+        opacity: number
+        borderColor: string
+        labelTextColor: string
+        labelRotation: number
+        parentLabelBackground: string
+        parentLabelTextColor: string
+    }
+
+    export type NodeEventHandler = (
+        node: TreeMapNodeDatum,
+        event: React.MouseEvent<HTMLElement>
+    ) => void
+
     export interface TreeMapProps {
         data: any
+        identity?: string
+        value?: string
+        valueFormat?: string
+        margin?: Box
+        tile?: TreeMapTile
+        leavesOnly?: boolean
+        innerPadding?: number
+        outerPadding?: number
+        theme?: Theme
+        colors?: OrdinalColorInstruction
+        colorBy?: string
+        nodeOpacity?: number
+        borderWidth?: number
+        borderColor?: InheritedColorProp<
+            Omit<
+                TreeMapNodeDatum,
+                'borderColor',
+                'labelTextColor' | 'parentLabelBackground' | 'parentLabelTextColor'
+            >
+        >
+        enableLabel?: boolean
+        label?: string
+        labelSkipSize?: number
+        orientLabel?: boolean
+        labelTextColor?: InheritedColorProp<
+            Omit<
+                TreeMapNodeDatum,
+                'labelTextColor' | 'parentLabelBackground' | 'parentLabelTextColor'
+            >
+        >
+        isInteractive?: boolean
+        animate?: boolean
+    }
+
+    export interface TreeMapSvgAndHtmlProps extends TreeMapProps {
+        onMouseEnter?: NodeEventHandler
+        onMouseMove?: NodeEventHandler
+        onMouseLeave?: NodeEventHandler
+        onClick?: NodeEventHandler
+    }
+
+    export class TreeMap extends React.Component<TreeMapSvgAndHtmlProps & Dimensions> {}
+    export class ResponsiveTreeMap extends React.Component<TreeMapSvgAndHtmlProps> {}
+
+    export class TreeMapHtml extends React.Component<TreeMapSvgAndHtmlProps & Dimensions> {}
+    export class ResponsiveTreeMapHtml extends React.Component<TreeMapSvgAndHtmlProps> {}
+
+    export type CanvasNodeEventHandler = (
+        node: TreeMapNodeDatum,
+        event: React.MouseEvent<HTMLCanvasElement>
+    ) => void
+
+    export interface TreeMapCanvasProps extends TreeMapProps {
+        onMouseMove?: CanvasNodeEventHandler
+        onClick?: CanvasNodeEventHandler
+        pixelRatio?: number
     }
 
-    export class TreeMap extends React.Component<TreeMapProps & Dimensions> {}
-    export class ResponsiveTreeMap<T> extends React.Component<TreeMapProps> {}
+    export class TreeMapCanvas extends React.Component<TreeMapCanvasProps & Dimensions> {}
+    export class ResponsiveTreeMapCanvas extends React.Component<TreeMapCanvasProps> {}
 }
diff --git a/packages/treemap/src/hooks.js b/packages/treemap/src/hooks.js
@@ -143,13 +143,13 @@ export const useTreeMap = ({
     const enhancedNodes = useMemo(
         () =>
             nodes.map(node => {
-                node.color = getColor(node)
                 node.opacity = nodeOpacity
+                node.labelRotation = orientLabel && node.height > node.width ? -90 : 0
+                node.color = getColor(node)
                 node.borderColor = getBorderColor(node)
                 node.labelTextColor = getLabelTextColor(node)
                 node.parentLabelBackground = getParentLabelBackground(node)
                 node.parentLabelTextColor = getParentLabelTextColor(node)
-                node.labelRotation = orientLabel && node.height > node.width ? -90 : 0
 
                 return node
             }),