Skip to content

Commit 0fdd685

Browse files
ploucplouc
committedJan 2, 2022
feat(treemap): datum now just extends object
·
v0.88.0v0.78.0
1 parent 7213ca0 commit 0fdd685

27 files changed

+699
-200
lines changed
 

‎packages/core/package.json

-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@
2424
"@react-spring/web": "9.3.1",
2525
"d3-color": "^2.0.0",
2626
"d3-format": "^1.4.4",
27-
"d3-hierarchy": "^1.1.8",
2827
"d3-interpolate": "^2.0.1",
2928
"d3-scale": "^3.2.3",
3029
"d3-scale-chromatic": "^2.0.0",

‎packages/core/src/props/index.js

-1
Original file line numberDiff line numberDiff line change
@@ -32,4 +32,3 @@ export * from './colors'
3232
export * from './curve'
3333
export * from './defs'
3434
export * from './stack'
35-
export * from './treeMap'

‎packages/core/src/props/treeMap.js

-24
This file was deleted.

‎packages/static/src/mappings/treemap.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { FunctionComponent } from 'react'
22
import Joi from 'joi'
33
import { Dimensions } from '@nivo/core'
4-
import { TreeMap, TreeMapSvgProps, DefaultTreeMapDatum, TreeMapDatum } from '@nivo/treemap'
4+
import { TreeMap, TreeMapSvgProps, DefaultTreeMapDatum } from '@nivo/treemap'
55
import { custom } from './common'
66
import { ordinalColors, inheritedColor } from './commons/colors'
77
import { dimensions } from './commons/dimensions'
88
import { OmitStrict } from '../types'
99

10-
export type TreeMapApiProps<Datum extends TreeMapDatum = DefaultTreeMapDatum> = OmitStrict<
10+
export type TreeMapApiProps<Datum = DefaultTreeMapDatum> = OmitStrict<
1111
TreeMapSvgProps<Datum> & Dimensions,
1212
| 'isInteractive'
1313
| 'onMouseEnter'

‎packages/treemap/src/ResponsiveTreeMap.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { ResponsiveWrapper } from '@nivo/core'
2-
import { DefaultTreeMapDatum, TreeMapDatum, TreeMapSvgProps } from './types'
2+
import { DefaultTreeMapDatum, TreeMapSvgProps } from './types'
33
import { TreeMap } from './TreeMap'
44

5-
export const ResponsiveTreeMap = <Datum extends TreeMapDatum = DefaultTreeMapDatum>(
5+
export const ResponsiveTreeMap = <Datum extends object = DefaultTreeMapDatum>(
66
props: Omit<TreeMapSvgProps<Datum>, 'height' | 'width'>
77
) => (
88
<ResponsiveWrapper>

‎packages/treemap/src/ResponsiveTreeMapCanvas.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { ResponsiveWrapper } from '@nivo/core'
2-
import { DefaultTreeMapDatum, TreeMapDatum, TreeMapCanvasProps } from './types'
2+
import { DefaultTreeMapDatum, TreeMapCanvasProps } from './types'
33
import { TreeMapCanvas } from './TreeMapCanvas'
44

5-
export const ResponsiveTreeMapCanvas = <Datum extends TreeMapDatum = DefaultTreeMapDatum>(
5+
export const ResponsiveTreeMapCanvas = <Datum extends object = DefaultTreeMapDatum>(
66
props: Omit<TreeMapCanvasProps<Datum>, 'height' | 'width'>
77
) => (
88
<ResponsiveWrapper>

‎packages/treemap/src/ResponsiveTreeMapHtml.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { ResponsiveWrapper } from '@nivo/core'
2-
import { DefaultTreeMapDatum, TreeMapDatum, TreeMapHtmlProps } from './types'
2+
import { DefaultTreeMapDatum, TreeMapHtmlProps } from './types'
33
import { TreeMapHtml } from './TreeMapHtml'
44

5-
export const ResponsiveTreeMapHtml = <Datum extends TreeMapDatum = DefaultTreeMapDatum>(
5+
export const ResponsiveTreeMapHtml = <Datum extends object = DefaultTreeMapDatum>(
66
props: Omit<TreeMapHtmlProps<Datum>, 'height' | 'width'>
77
) => (
88
<ResponsiveWrapper>

‎packages/treemap/src/TreeMap.tsx

+9-15
Original file line numberDiff line numberDiff line change
@@ -7,57 +7,51 @@ import {
77
} from '@nivo/core'
88
import { useTreeMap } from './hooks'
99
import { TreeMapNodes } from './TreeMapNodes'
10-
import {
11-
DefaultTreeMapDatum,
12-
NodeComponent,
13-
TreeMapCommonProps,
14-
TreeMapDatum,
15-
TreeMapSvgProps,
16-
} from './types'
10+
import { DefaultTreeMapDatum, NodeComponent, TreeMapCommonProps, TreeMapSvgProps } from './types'
1711
import { svgDefaultProps } from './defaults'
1812

19-
type InnerTreeMapProps<Datum extends TreeMapDatum> = Omit<
13+
type InnerTreeMapProps<Datum extends object> = Omit<
2014
TreeMapSvgProps<Datum>,
2115
'animate' | 'motionConfig' | 'renderWrapper' | 'theme'
2216
>
2317

24-
const InnerTreeMap = <Datum extends TreeMapDatum>({
18+
const InnerTreeMap = <Datum extends object>({
2519
data,
2620
identity = svgDefaultProps.identity as TreeMapCommonProps<Datum>['identity'],
2721
value = svgDefaultProps.value as TreeMapCommonProps<Datum>['value'],
2822
valueFormat,
2923
tile = svgDefaultProps.tile,
30-
nodeComponent = svgDefaultProps.nodeComponent as unknown as NodeComponent<Datum>,
24+
nodeComponent = svgDefaultProps.nodeComponent as NodeComponent<Datum>,
3125
innerPadding = svgDefaultProps.innerPadding,
3226
outerPadding = svgDefaultProps.outerPadding,
3327
leavesOnly = svgDefaultProps.leavesOnly,
3428
width,
3529
height,
3630
margin: partialMargin,
3731
colors = svgDefaultProps.colors as TreeMapCommonProps<Datum>['colors'],
38-
colorBy = svgDefaultProps.colorBy,
32+
colorBy = svgDefaultProps.colorBy as TreeMapCommonProps<Datum>['colorBy'],
3933
nodeOpacity = svgDefaultProps.nodeOpacity,
4034
borderWidth = svgDefaultProps.borderWidth,
4135
borderColor = svgDefaultProps.borderColor as TreeMapCommonProps<Datum>['borderColor'],
4236
defs = svgDefaultProps.defs,
4337
fill = svgDefaultProps.fill,
4438
enableLabel = svgDefaultProps.enableLabel,
4539
label = svgDefaultProps.label as TreeMapCommonProps<Datum>['label'],
46-
labelTextColor = svgDefaultProps.labelTextColor,
40+
labelTextColor = svgDefaultProps.labelTextColor as TreeMapCommonProps<Datum>['labelTextColor'],
4741
orientLabel = svgDefaultProps.orientLabel,
4842
labelSkipSize = svgDefaultProps.labelSkipSize,
4943
enableParentLabel = svgDefaultProps.enableParentLabel,
5044
parentLabel = svgDefaultProps.parentLabel as TreeMapCommonProps<Datum>['parentLabel'],
5145
parentLabelSize = svgDefaultProps.parentLabelSize,
5246
parentLabelPosition = svgDefaultProps.parentLabelPosition,
5347
parentLabelPadding = svgDefaultProps.parentLabelPadding,
54-
parentLabelTextColor = svgDefaultProps.parentLabelTextColor,
48+
parentLabelTextColor = svgDefaultProps.parentLabelTextColor as TreeMapCommonProps<Datum>['parentLabelTextColor'],
5549
isInteractive = svgDefaultProps.isInteractive,
5650
onMouseEnter,
5751
onMouseMove,
5852
onMouseLeave,
5953
onClick,
60-
tooltip = svgDefaultProps.tooltip as unknown as TreeMapCommonProps<Datum>['tooltip'],
54+
tooltip = svgDefaultProps.tooltip as TreeMapCommonProps<Datum>['tooltip'],
6155
role,
6256
ariaLabel,
6357
ariaLabelledBy,
@@ -126,7 +120,7 @@ const InnerTreeMap = <Datum extends TreeMapDatum>({
126120
)
127121
}
128122

129-
export const TreeMap = <Datum extends TreeMapDatum = DefaultTreeMapDatum>({
123+
export const TreeMap = <Datum extends object = DefaultTreeMapDatum>({
130124
isInteractive = svgDefaultProps.isInteractive,
131125
animate = svgDefaultProps.animate,
132126
motionConfig = svgDefaultProps.motionConfig,

‎packages/treemap/src/TreeMapCanvas.tsx

+11-16
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,10 @@ import {
1010
} from '@nivo/core'
1111
import { useTooltip } from '@nivo/tooltip'
1212
import { useTreeMap } from './hooks'
13-
import {
14-
ComputedNode,
15-
DefaultTreeMapDatum,
16-
TreeMapCanvasProps,
17-
TreeMapCommonProps,
18-
TreeMapDatum,
19-
} from './types'
13+
import { ComputedNode, DefaultTreeMapDatum, TreeMapCanvasProps, TreeMapCommonProps } from './types'
2014
import { canvasDefaultProps } from './defaults'
2115

22-
const findNodeUnderCursor = <Datum extends TreeMapDatum>(
16+
const findNodeUnderCursor = <Datum extends object>(
2317
nodes: ComputedNode<Datum>[],
2418
margin: Margin,
2519
x: number,
@@ -29,12 +23,12 @@ const findNodeUnderCursor = <Datum extends TreeMapDatum>(
2923
isCursorInRect(node.x + margin.left, node.y + margin.top, node.width, node.height, x, y)
3024
)
3125

32-
type InnerTreeMapCanvasProps<Datum extends TreeMapDatum> = Omit<
26+
type InnerTreeMapCanvasProps<Datum extends object> = Omit<
3327
TreeMapCanvasProps<Datum>,
3428
'renderWrapper' | 'theme'
3529
>
3630

37-
const InnerTreeMapCanvas = <Datum extends TreeMapDatum>({
31+
const InnerTreeMapCanvas = <Datum extends object>({
3832
data,
3933
identity = canvasDefaultProps.identity as TreeMapCommonProps<Datum>['identity'],
4034
value = canvasDefaultProps.identity as TreeMapCommonProps<Datum>['value'],
@@ -47,19 +41,19 @@ const InnerTreeMapCanvas = <Datum extends TreeMapDatum>({
4741
height,
4842
margin: partialMargin,
4943
colors = canvasDefaultProps.colors as TreeMapCommonProps<Datum>['colors'],
50-
colorBy = canvasDefaultProps.colorBy,
44+
colorBy = canvasDefaultProps.colorBy as TreeMapCommonProps<Datum>['colorBy'],
5145
nodeOpacity = canvasDefaultProps.nodeOpacity,
5246
borderWidth = canvasDefaultProps.borderWidth,
5347
borderColor = canvasDefaultProps.borderColor as TreeMapCommonProps<Datum>['borderColor'],
5448
enableLabel = canvasDefaultProps.enableLabel,
5549
label = canvasDefaultProps.label as TreeMapCommonProps<Datum>['label'],
56-
labelTextColor = canvasDefaultProps.labelTextColor,
50+
labelTextColor = canvasDefaultProps.labelTextColor as TreeMapCommonProps<Datum>['labelTextColor'],
5751
orientLabel = canvasDefaultProps.orientLabel,
5852
labelSkipSize = canvasDefaultProps.labelSkipSize,
5953
isInteractive = canvasDefaultProps.isInteractive,
6054
onMouseMove,
6155
onClick,
62-
tooltip = canvasDefaultProps.tooltip as unknown as TreeMapCommonProps<Datum>['tooltip'],
56+
tooltip = canvasDefaultProps.tooltip as TreeMapCommonProps<Datum>['tooltip'],
6357
pixelRatio = canvasDefaultProps.pixelRatio,
6458
role,
6559
ariaLabel,
@@ -100,11 +94,12 @@ const InnerTreeMapCanvas = <Datum extends TreeMapDatum>({
10094
useEffect(() => {
10195
if (canvasEl.current === null) return
10296

97+
const ctx = canvasEl.current.getContext('2d')
98+
if (ctx === null) return
99+
103100
canvasEl.current.width = outerWidth * pixelRatio
104101
canvasEl.current.height = outerHeight * pixelRatio
105102

106-
const ctx = canvasEl.current.getContext('2d')!
107-
108103
ctx.scale(pixelRatio, pixelRatio)
109104

110105
ctx.fillStyle = theme.background
@@ -220,7 +215,7 @@ const InnerTreeMapCanvas = <Datum extends TreeMapDatum>({
220215
)
221216
}
222217

223-
export const TreeMapCanvas = <Datum extends TreeMapDatum = DefaultTreeMapDatum>({
218+
export const TreeMapCanvas = <Datum extends object = DefaultTreeMapDatum>({
224219
theme,
225220
isInteractive = canvasDefaultProps.isInteractive,
226221
animate = canvasDefaultProps.animate,

‎packages/treemap/src/TreeMapHtml.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import { Container, useDimensions } from '@nivo/core'
22
import { useTreeMap } from './hooks'
33
import { TreeMapNodes } from './TreeMapNodes'
4-
import { DefaultTreeMapDatum, TreeMapCommonProps, TreeMapDatum, TreeMapHtmlProps } from './types'
4+
import { DefaultTreeMapDatum, TreeMapCommonProps, TreeMapHtmlProps } from './types'
55
import { htmlDefaultProps } from './defaults'
66

7-
type InnerTreeMapHtmlProps<Datum extends TreeMapDatum> = Omit<
7+
type InnerTreeMapHtmlProps<Datum extends object> = Omit<
88
TreeMapHtmlProps<Datum>,
99
'animate' | 'motionConfig' | 'renderWrapper' | 'theme'
1010
>
1111

12-
const InnerTreeMapHtml = <Datum extends TreeMapDatum>({
12+
const InnerTreeMapHtml = <Datum extends object>({
1313
data,
1414
identity = htmlDefaultProps.identity as TreeMapCommonProps<Datum>['identity'],
1515
value = htmlDefaultProps.value as TreeMapCommonProps<Datum>['value'],
@@ -23,27 +23,27 @@ const InnerTreeMapHtml = <Datum extends TreeMapDatum>({
2323
height,
2424
margin: partialMargin,
2525
colors = htmlDefaultProps.colors as TreeMapCommonProps<Datum>['colors'],
26-
colorBy = htmlDefaultProps.colorBy,
26+
colorBy = htmlDefaultProps.colorBy as TreeMapCommonProps<Datum>['colorBy'],
2727
nodeOpacity = htmlDefaultProps.nodeOpacity,
2828
borderWidth = htmlDefaultProps.borderWidth,
2929
borderColor = htmlDefaultProps.borderColor as TreeMapCommonProps<Datum>['borderColor'],
3030
enableLabel = htmlDefaultProps.enableLabel,
3131
label = htmlDefaultProps.label as TreeMapCommonProps<Datum>['label'],
32-
labelTextColor = htmlDefaultProps.labelTextColor,
32+
labelTextColor = htmlDefaultProps.labelTextColor as TreeMapCommonProps<Datum>['labelTextColor'],
3333
orientLabel = htmlDefaultProps.orientLabel,
3434
labelSkipSize = htmlDefaultProps.labelSkipSize,
3535
enableParentLabel = htmlDefaultProps.enableParentLabel,
3636
parentLabel = htmlDefaultProps.parentLabel as TreeMapCommonProps<Datum>['parentLabel'],
3737
parentLabelSize = htmlDefaultProps.parentLabelSize,
3838
parentLabelPosition = htmlDefaultProps.parentLabelPosition,
3939
parentLabelPadding = htmlDefaultProps.parentLabelPadding,
40-
parentLabelTextColor = htmlDefaultProps.parentLabelTextColor,
40+
parentLabelTextColor = htmlDefaultProps.parentLabelTextColor as TreeMapCommonProps<Datum>['parentLabelTextColor'],
4141
isInteractive = htmlDefaultProps.isInteractive,
4242
onMouseEnter,
4343
onMouseMove,
4444
onMouseLeave,
4545
onClick,
46-
tooltip = htmlDefaultProps.tooltip as unknown as TreeMapCommonProps<Datum>['tooltip'],
46+
tooltip = htmlDefaultProps.tooltip as TreeMapCommonProps<Datum>['tooltip'],
4747
role,
4848
ariaLabel,
4949
ariaLabelledBy,
@@ -113,7 +113,7 @@ const InnerTreeMapHtml = <Datum extends TreeMapDatum>({
113113
)
114114
}
115115

116-
export const TreeMapHtml = <Datum extends TreeMapDatum = DefaultTreeMapDatum>({
116+
export const TreeMapHtml = <Datum extends object = DefaultTreeMapDatum>({
117117
isInteractive = htmlDefaultProps.isInteractive,
118118
animate = htmlDefaultProps.animate,
119119
motionConfig = htmlDefaultProps.motionConfig,

‎packages/treemap/src/TreeMapHtmlNode.tsx

+2-10
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,10 @@
11
import { memo } from 'react'
22
import { animated } from '@react-spring/web'
33
import { useTheme } from '@nivo/core'
4-
import { NodeProps, TreeMapDatum } from './types'
4+
import { NodeProps } from './types'
55
import { htmlNodeTransform, htmlLabelTransform } from './transitions'
66

7-
/*
8-
parentLabelHtmlTransform: `translate(${
9-
node.parentLabelX - (node.parentLabelRotation === 0 ? 0 : 5)
10-
}px,${node.parentLabelY - (node.parentLabelRotation === 0 ? 5 : 0)}px) rotate(${
11-
node.parentLabelRotation
12-
}deg)`,
13-
*/
14-
15-
const NonMemoizedTreeMapHtmlNode = <Datum extends TreeMapDatum>({
7+
const NonMemoizedTreeMapHtmlNode = <Datum extends object>({
168
node,
179
animatedProps,
1810
borderWidth,

‎packages/treemap/src/TreeMapNode.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { memo } from 'react'
22
import { animated, to } from '@react-spring/web'
33
import { useTheme } from '@nivo/core'
4-
import { NodeProps, TreeMapDatum } from './types'
4+
import { NodeProps } from './types'
55
import { svgNodeTransform, svgLabelTransform } from './transitions'
66

7-
const NonMemoizedTreeMapNode = <Datum extends TreeMapDatum>({
7+
const NonMemoizedTreeMapNode = <Datum extends object>({
88
node,
99
animatedProps,
1010
borderWidth,

‎packages/treemap/src/TreeMapNodeTooltip.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import { memo } from 'react'
22
import { BasicTooltip } from '@nivo/tooltip'
3-
import { TreeMapDatum, TooltipProps } from './types'
3+
import { TooltipProps } from './types'
44

5-
const NonMemoizedTreeMapNodeTooltip = <Datum extends TreeMapDatum>({
6-
node,
7-
}: TooltipProps<Datum>) => (
5+
const NonMemoizedTreeMapNodeTooltip = <Datum extends object>({ node }: TooltipProps<Datum>) => (
86
<BasicTooltip id={node.id} value={node.formattedValue} enableChip={true} color={node.color} />
97
)
108

‎packages/treemap/src/TreeMapNodes.tsx

+8-10
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,13 @@ import { useMotionConfig } from '@nivo/core'
44
import { useInteractiveTreeMapNodes } from './hooks'
55
import {
66
ComputedNode,
7-
NodeMouseEventHandler,
87
TreeMapCommonProps,
9-
TreeMapDatum,
108
NodeAnimatedProps,
119
NodeComponent,
1210
ComputedNodeWithHandlers,
1311
} from './types'
1412

15-
const getAnimatedNodeProps = <Datum extends TreeMapDatum>(
13+
const getAnimatedNodeProps = <Datum extends object>(
1614
node: ComputedNodeWithHandlers<Datum>
1715
): NodeAnimatedProps => ({
1816
x: node.x,
@@ -30,7 +28,7 @@ const getAnimatedNodeProps = <Datum extends TreeMapDatum>(
3028
parentLabelOpacity: 1,
3129
})
3230

33-
const getEndingAnimatedNodeProps = <Datum extends TreeMapDatum>(
31+
const getEndingAnimatedNodeProps = <Datum extends object>(
3432
node: ComputedNodeWithHandlers<Datum>
3533
): NodeAnimatedProps => {
3634
const x = node.x + node.width / 2
@@ -53,22 +51,22 @@ const getEndingAnimatedNodeProps = <Datum extends TreeMapDatum>(
5351
}
5452
}
5553

56-
interface TreeMapNodesProps<Datum extends TreeMapDatum> {
54+
interface TreeMapNodesProps<Datum extends object> {
5755
nodes: ComputedNode<Datum>[]
5856
nodeComponent: NodeComponent<Datum>
5957
borderWidth: TreeMapCommonProps<Datum>['borderWidth']
6058
enableLabel: TreeMapCommonProps<Datum>['enableLabel']
6159
labelSkipSize: TreeMapCommonProps<Datum>['labelSkipSize']
6260
enableParentLabel: TreeMapCommonProps<Datum>['enableParentLabel']
6361
isInteractive: TreeMapCommonProps<Datum>['isInteractive']
64-
onMouseEnter?: NodeMouseEventHandler<Datum>
65-
onMouseMove?: NodeMouseEventHandler<Datum>
66-
onMouseLeave?: NodeMouseEventHandler<Datum>
67-
onClick?: NodeMouseEventHandler<Datum>
62+
onMouseEnter?: TreeMapCommonProps<Datum>['onMouseEnter']
63+
onMouseMove?: TreeMapCommonProps<Datum>['onMouseMove']
64+
onMouseLeave?: TreeMapCommonProps<Datum>['onMouseLeave']
65+
onClick?: TreeMapCommonProps<Datum>['onClick']
6866
tooltip: TreeMapCommonProps<Datum>['tooltip']
6967
}
7068

71-
const NonMemoizedTreeMapNodes = <Datum extends TreeMapDatum>({
69+
const NonMemoizedTreeMapNodes = <Datum extends object>({
7270
nodes,
7371
nodeComponent,
7472
borderWidth,

‎packages/treemap/src/hooks.tsx ‎packages/treemap/src/hooks.ts

+19-35
Original file line numberDiff line numberDiff line change
@@ -8,29 +8,21 @@ import {
88
HierarchyNode,
99
HierarchyRectangularNode,
1010
} from 'd3-hierarchy'
11-
import {
12-
// @ts-ignore
13-
treeMapTileFromProp,
14-
useTheme,
15-
useValueFormatter,
16-
PropertyAccessor,
17-
usePropertyAccessor,
18-
} from '@nivo/core'
11+
import { useTheme, useValueFormatter, PropertyAccessor, usePropertyAccessor } from '@nivo/core'
1912
import { useOrdinalColorScale, useInheritedColor } from '@nivo/colors'
2013
import { useTooltip } from '@nivo/tooltip'
2114
import { commonDefaultProps } from './defaults'
2215
import {
2316
DefaultTreeMapDatum,
24-
NodeMouseEventHandler,
2517
TreeMapCommonProps,
2618
TreeMapDataProps,
27-
TreeMapDatum,
2819
ComputedNode,
2920
ComputedNodeWithoutStyles,
3021
ComputedNodeWithHandlers,
3122
} from './types'
23+
import { tileByType } from './tiling'
3224

33-
export const useTreeMapLayout = <Datum extends TreeMapDatum>({
25+
export const useTreeMapLayout = <Datum extends object>({
3426
width,
3527
height,
3628
tile,
@@ -54,7 +46,7 @@ export const useTreeMapLayout = <Datum extends TreeMapDatum>({
5446
useMemo(() => {
5547
const treemap = d3Treemap<Datum>()
5648
.size([width, height])
57-
.tile(treeMapTileFromProp(tile))
49+
.tile(tileByType[tile])
5850
.round(true)
5951
.paddingInner(innerPadding)
6052
.paddingOuter(outerPadding)
@@ -78,15 +70,15 @@ export const useTreeMapLayout = <Datum extends TreeMapDatum>({
7870
leavesOnly,
7971
])
8072

81-
export const useHierarchy = <Datum extends TreeMapDatum>({
73+
export const useHierarchy = <Datum extends object>({
8274
root,
8375
getValue,
8476
}: {
8577
root: Datum
8678
getValue: (datum: Datum) => number
8779
}) => useMemo(() => hierarchy<Datum>(root).sum(getValue), [root, getValue])
8880

89-
const computeNodeIdAndPath = <Datum extends TreeMapDatum>(
81+
const computeNodeIdAndPath = <Datum extends object>(
9082
node: HierarchyNode<Datum>,
9183
getIdentity: (node: Datum) => string
9284
) => {
@@ -98,7 +90,7 @@ const computeNodeIdAndPath = <Datum extends TreeMapDatum>(
9890
return { path: path.join('.'), pathComponents: path }
9991
}
10092

101-
export const useTreeMap = <Datum extends TreeMapDatum = DefaultTreeMapDatum>({
93+
export const useTreeMap = <Datum extends object = DefaultTreeMapDatum>({
10294
data,
10395
width,
10496
height,
@@ -117,11 +109,11 @@ export const useTreeMap = <Datum extends TreeMapDatum = DefaultTreeMapDatum>({
117109
parentLabelPosition = commonDefaultProps.parentLabelPosition,
118110
parentLabelPadding = commonDefaultProps.parentLabelPadding,
119111
colors = commonDefaultProps.colors as TreeMapCommonProps<Datum>['colors'],
120-
colorBy = commonDefaultProps.colorBy,
112+
colorBy = commonDefaultProps.colorBy as TreeMapCommonProps<Datum>['colorBy'],
121113
nodeOpacity = commonDefaultProps.nodeOpacity,
122114
borderColor = commonDefaultProps.borderColor as TreeMapCommonProps<Datum>['borderColor'],
123-
labelTextColor = commonDefaultProps.labelTextColor,
124-
parentLabelTextColor = commonDefaultProps.parentLabelTextColor,
115+
labelTextColor = commonDefaultProps.labelTextColor as TreeMapCommonProps<Datum>['labelTextColor'],
116+
parentLabelTextColor = commonDefaultProps.parentLabelTextColor as TreeMapCommonProps<Datum>['parentLabelTextColor'],
125117
}: {
126118
data: TreeMapDataProps<Datum>['data']
127119
width: number
@@ -165,7 +157,7 @@ export const useTreeMap = <Datum extends TreeMapDatum = DefaultTreeMapDatum>({
165157
leavesOnly,
166158
})
167159

168-
const hierarchy = useHierarchy({ root: data, getValue })
160+
const hierarchy = useHierarchy<Datum>({ root: data, getValue })
169161

170162
const rawNodes = useMemo(() => {
171163
// d3 treemap mutates the data, so we need to copy it
@@ -231,10 +223,10 @@ export const useTreeMap = <Datum extends TreeMapDatum = DefaultTreeMapDatum>({
231223
}),
232224
[
233225
rawNodes,
234-
leavesOnly,
235226
getIdentity,
236227
formatValue,
237228
getLabel,
229+
orientLabel,
238230
getParentLabel,
239231
parentLabelSize,
240232
parentLabelPosition,
@@ -264,15 +256,7 @@ export const useTreeMap = <Datum extends TreeMapDatum = DefaultTreeMapDatum>({
264256

265257
return nodeWithStyles
266258
}),
267-
[
268-
nodes,
269-
getColor,
270-
nodeOpacity,
271-
getBorderColor,
272-
getLabelTextColor,
273-
getParentLabelTextColor,
274-
orientLabel,
275-
]
259+
[nodes, getColor, nodeOpacity, getBorderColor, getLabelTextColor, getParentLabelTextColor]
276260
)
277261

278262
return {
@@ -282,7 +266,7 @@ export const useTreeMap = <Datum extends TreeMapDatum = DefaultTreeMapDatum>({
282266
}
283267
}
284268

285-
export const useInteractiveTreeMapNodes = <Datum extends TreeMapDatum>(
269+
export const useInteractiveTreeMapNodes = <Datum extends object>(
286270
nodes: ComputedNode<Datum>[],
287271
{
288272
isInteractive,
@@ -293,10 +277,10 @@ export const useInteractiveTreeMapNodes = <Datum extends TreeMapDatum>(
293277
tooltip,
294278
}: {
295279
isInteractive: TreeMapCommonProps<Datum>['isInteractive']
296-
onMouseEnter?: NodeMouseEventHandler<Datum>
297-
onMouseMove?: NodeMouseEventHandler<Datum>
298-
onMouseLeave?: NodeMouseEventHandler<Datum>
299-
onClick?: NodeMouseEventHandler<Datum>
280+
onMouseEnter?: TreeMapCommonProps<Datum>['onMouseEnter']
281+
onMouseMove?: TreeMapCommonProps<Datum>['onMouseMove']
282+
onMouseLeave?: TreeMapCommonProps<Datum>['onMouseLeave']
283+
onClick?: TreeMapCommonProps<Datum>['onClick']
300284
tooltip: TreeMapCommonProps<Datum>['tooltip']
301285
}
302286
): ComputedNodeWithHandlers<Datum>[] => {
@@ -353,6 +337,6 @@ export const useInteractiveTreeMapNodes = <Datum extends TreeMapDatum>(
353337
onClick: (event: MouseEvent) => handleClick(node, event),
354338
}
355339
}),
356-
[nodes, handleMouseEnter, handleMouseMove, handleMouseLeave, handleClick]
340+
[isInteractive, nodes, handleMouseEnter, handleMouseMove, handleMouseLeave, handleClick]
357341
)
358342
}

‎packages/treemap/src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@ export * from './ResponsiveTreeMapCanvas'
77
export * from './types'
88
export * from './defaults'
99
export * from './transitions'
10+
export * from './tiling'

‎packages/treemap/src/tiling.ts

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import {
2+
treemapBinary,
3+
treemapDice,
4+
treemapSlice,
5+
treemapSliceDice,
6+
treemapSquarify,
7+
} from 'd3-hierarchy'
8+
9+
export const tileByType = {
10+
binary: treemapBinary,
11+
dice: treemapDice,
12+
slice: treemapSlice,
13+
sliceDice: treemapSliceDice,
14+
squarify: treemapSquarify,
15+
} as const
16+
17+
export type TileType = keyof typeof tileByType

‎packages/treemap/src/transitions.ts

+7-3
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,12 @@ export const htmlLabelTransform = (
1818
rotation: SpringValue<number>
1919
) => to([x, y, rotation], (x, y, rotation) => `translate(${x}px,${y}px) rotate(${rotation}deg)`)
2020

21-
/*
22-
export const svgParentLabelTransform = () => to()
21+
// export const htmlParentLabelTransform = () => to()
2322

24-
export const htmlParentLabelTransform = () => to()
23+
/*
24+
parentLabelHtmlTransform: `translate(${
25+
node.parentLabelX - (node.parentLabelRotation === 0 ? 0 : 5)
26+
}px,${node.parentLabelY - (node.parentLabelRotation === 0 ? 5 : 0)}px) rotate(${
27+
node.parentLabelRotation
28+
}deg)`,
2529
*/

‎packages/treemap/src/types.ts

+53-45
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,24 @@
11
import { AriaAttributes, FunctionComponent, MouseEvent, MouseEventHandler } from 'react'
2+
import { SpringValues } from '@react-spring/web'
23
import {
34
Box,
45
Dimensions,
56
Theme,
67
ValueFormat,
78
PropertyAccessor,
89
ModernMotionProps,
10+
SvgDefsAndFill,
911
} from '@nivo/core'
10-
import { InheritedColorConfig, OrdinalColorScaleConfig } from '@nivo/colors'
11-
import { SpringValues } from '@react-spring/web'
12-
13-
export interface TreeMapDatum {
14-
children: TreeMapDatum[]
15-
}
12+
import { InheritedColorConfig, OrdinalColorScaleConfig, DatumIdentityAccessor } from '@nivo/colors'
13+
import { TileType } from './tiling'
1614

1715
export interface DefaultTreeMapDatum {
1816
id: string
19-
value: string
20-
children: DefaultTreeMapDatum[]
17+
value?: number
18+
children?: DefaultTreeMapDatum[]
2119
}
2220

23-
export interface ComputedNode<Datum extends TreeMapDatum> {
21+
export interface ComputedNode<Datum extends object> {
2422
id: string
2523
path: string
2624
pathComponents: string[]
@@ -49,12 +47,12 @@ export interface ComputedNode<Datum extends TreeMapDatum> {
4947
parentLabelRotation: number
5048
}
5149

52-
export type ComputedNodeWithoutStyles<Datum extends TreeMapDatum> = Omit<
50+
export type ComputedNodeWithoutStyles<Datum extends object> = Omit<
5351
ComputedNode<Datum>,
5452
'color' | 'opacity' | 'borderColor' | 'labelTextColor' | 'parentLabelTextColor'
5553
>
5654

57-
export interface ComputedNodeWithHandlers<Datum extends TreeMapDatum> extends ComputedNode<Datum> {
55+
export interface ComputedNodeWithHandlers<Datum extends object> extends ComputedNode<Datum> {
5856
onMouseEnter?: MouseEventHandler
5957
onMouseMove?: MouseEventHandler
6058
onMouseLeave?: MouseEventHandler
@@ -77,52 +75,50 @@ export type NodeAnimatedProps = {
7775
parentLabelOpacity: number
7876
}
7977

80-
export interface NodeProps<Datum extends TreeMapDatum> {
78+
export interface NodeProps<Datum extends object> {
8179
node: ComputedNodeWithHandlers<Datum>
8280
animatedProps: SpringValues<NodeAnimatedProps>
8381
borderWidth: TreeMapCommonProps<Datum>['borderWidth']
8482
enableLabel: TreeMapCommonProps<Datum>['enableLabel']
8583
labelSkipSize: TreeMapCommonProps<Datum>['labelSkipSize']
8684
enableParentLabel: TreeMapCommonProps<Datum>['enableParentLabel']
8785
}
88-
export type NodeComponent<Datum extends TreeMapDatum> = FunctionComponent<NodeProps<Datum>>
86+
export type NodeComponent<Datum extends object> = FunctionComponent<NodeProps<Datum>>
8987

90-
export type TreeMapTile = 'binary' | 'squarify' | 'slice' | 'dice' | 'sliceDice' | 'resquarify'
91-
92-
export interface TooltipProps<Datum extends TreeMapDatum> {
88+
export interface TooltipProps<Datum extends object> {
9389
node: ComputedNode<Datum>
9490
}
95-
export type TooltipComponent<Datum extends TreeMapDatum> = FunctionComponent<TooltipProps<Datum>>
91+
export type TooltipComponent<Datum extends object> = FunctionComponent<TooltipProps<Datum>>
9692

9793
export type LayerId = 'nodes'
9894

99-
export interface CustomLayerProps<Datum extends TreeMapDatum> {
95+
export interface CustomLayerProps<Datum extends object> {
10096
nodes: ComputedNode<Datum>[]
10197
}
102-
export type CustomSvgLayer<Datum extends TreeMapDatum> = FunctionComponent<CustomLayerProps<Datum>>
103-
export type CustomHtmlLayer<Datum extends TreeMapDatum> = FunctionComponent<CustomLayerProps<Datum>>
104-
export type CustomCanvasLayer<Datum extends TreeMapDatum> = (
98+
export type CustomSvgLayer<Datum extends object> = FunctionComponent<CustomLayerProps<Datum>>
99+
export type CustomHtmlLayer<Datum extends object> = FunctionComponent<CustomLayerProps<Datum>>
100+
export type CustomCanvasLayer<Datum extends object> = (
105101
ctx: CanvasRenderingContext2D,
106102
props: CustomLayerProps<Datum>
107103
) => void
108104

109-
export type NodeMouseEventHandler<Datum extends TreeMapDatum> = (
105+
export type NodeMouseEventHandler<Datum extends object> = (
110106
node: ComputedNode<Datum>,
111107
event: MouseEvent
112108
) => void
113109

114-
export interface TreeMapDataProps<Datum extends TreeMapDatum> {
110+
export interface TreeMapDataProps<Datum extends object> {
115111
data: Datum
116112
}
117113

118-
export type TreeMapCommonProps<Datum extends TreeMapDatum> = {
114+
export type TreeMapCommonProps<Datum extends object> = {
119115
margin: Box
120116

121117
identity: PropertyAccessor<Datum, string>
122118
value: PropertyAccessor<Datum, number>
123119
valueFormat: ValueFormat<number>
124120

125-
tile: TreeMapTile
121+
tile: TileType
126122
leavesOnly: boolean
127123
innerPadding: number
128124
outerPadding: number
@@ -131,19 +127,27 @@ export type TreeMapCommonProps<Datum extends TreeMapDatum> = {
131127
label: PropertyAccessor<Omit<ComputedNodeWithoutStyles<Datum>, 'label' | 'parentLabel'>, string>
132128
labelFormat: ValueFormat<number>
133129
labelSkipSize: number
134-
labelTextColor: InheritedColorConfig<any>
130+
labelTextColor: InheritedColorConfig<
131+
ComputedNodeWithoutStyles<Datum> & {
132+
color: ComputedNode<Datum>['color']
133+
}
134+
>
135135
orientLabel: boolean
136136

137137
enableParentLabel: boolean
138138
parentLabel: PropertyAccessor<Omit<ComputedNodeWithoutStyles<Datum>, 'parentLabel'>, string>
139139
parentLabelSize: number
140140
parentLabelPosition: 'top' | 'right' | 'bottom' | 'left'
141141
parentLabelPadding: number
142-
parentLabelTextColor: InheritedColorConfig<any>
142+
parentLabelTextColor: InheritedColorConfig<
143+
ComputedNodeWithoutStyles<Datum> & {
144+
color: ComputedNode<Datum>['color']
145+
}
146+
>
143147

144148
theme: Theme
145149
colors: OrdinalColorScaleConfig<ComputedNodeWithoutStyles<Datum>>
146-
colorBy: any //colorPropertyAccessorPropType.isRequired,
150+
colorBy: string | DatumIdentityAccessor<ComputedNodeWithoutStyles<Datum>>
147151
nodeOpacity: number
148152
borderWidth: number
149153
borderColor: InheritedColorConfig<
@@ -153,6 +157,10 @@ export type TreeMapCommonProps<Datum extends TreeMapDatum> = {
153157
>
154158

155159
isInteractive: boolean
160+
onMouseEnter: NodeMouseEventHandler<Datum>
161+
onMouseMove: NodeMouseEventHandler<Datum>
162+
onMouseLeave: NodeMouseEventHandler<Datum>
163+
onClick: NodeMouseEventHandler<Datum>
156164
tooltip: TooltipComponent<Datum>
157165

158166
renderWrapper: boolean
@@ -163,36 +171,36 @@ export type TreeMapCommonProps<Datum extends TreeMapDatum> = {
163171
ariaDescribedBy: AriaAttributes['aria-describedby']
164172
} & ModernMotionProps
165173

166-
export type TreeMapSvgProps<Datum extends TreeMapDatum> = Partial<TreeMapCommonProps<Datum>> &
174+
export type TreeMapSvgProps<Datum extends object> = Partial<TreeMapCommonProps<Datum>> &
167175
TreeMapDataProps<Datum> &
168-
Dimensions & {
176+
Dimensions &
177+
SvgDefsAndFill<ComputedNode<Datum>> & {
169178
nodeComponent?: NodeComponent<Datum>
170179
layers?: (LayerId | CustomSvgLayer<Datum>)[]
171-
defs?: any[]
172-
fill?: any[]
173-
onMouseEnter?: NodeMouseEventHandler<Datum>
174-
onMouseMove?: NodeMouseEventHandler<Datum>
175-
onMouseLeave?: NodeMouseEventHandler<Datum>
176-
onClick?: NodeMouseEventHandler<Datum>
177180
}
178181

179-
export type TreeMapHtmlProps<Datum extends TreeMapDatum> = Partial<TreeMapCommonProps<Datum>> &
182+
export type TreeMapHtmlProps<Datum extends object> = Partial<TreeMapCommonProps<Datum>> &
180183
TreeMapDataProps<Datum> &
181184
Dimensions & {
182185
nodeComponent?: NodeComponent<Datum>
183186
layers?: (LayerId | CustomHtmlLayer<Datum>)[]
184-
pixelRatio?: number
185-
onMouseEnter?: NodeMouseEventHandler<Datum>
186-
onMouseMove?: NodeMouseEventHandler<Datum>
187-
onMouseLeave?: NodeMouseEventHandler<Datum>
188-
onClick?: NodeMouseEventHandler<Datum>
189187
}
190188

191-
export type TreeMapCanvasProps<Datum extends TreeMapDatum> = Partial<TreeMapCommonProps<Datum>> &
189+
export type TreeMapCanvasProps<Datum extends object> = Partial<
190+
Omit<
191+
TreeMapCommonProps<Datum>,
192+
| 'enableParentLabel'
193+
| 'parentLabel'
194+
| 'parentLabelSize'
195+
| 'parentLabelPosition'
196+
| 'parentLabelPadding'
197+
| 'parentLabelTextColor'
198+
| 'onMouseEnter'
199+
| 'onMouseLeave'
200+
>
201+
> &
192202
TreeMapDataProps<Datum> &
193203
Dimensions & {
194204
layers?: (LayerId | CustomCanvasLayer<Datum>)[]
195205
pixelRatio?: number
196-
onMouseMove?: NodeMouseEventHandler<Datum>
197-
onClick?: NodeMouseEventHandler<Datum>
198206
}

‎packages/treemap/stories/treemap.stories.js ‎packages/treemap/stories/treemap.stories.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { storiesOf } from '@storybook/react'
22
import { generateLibTree } from '@nivo/generators'
33
import { linearGradientDef, patternDotsDef } from '@nivo/core'
4+
// @ts-ignore
45
import { TreeMap } from '../src'
56

67
const commonProperties = {

‎packages/treemap/stories/treemapHtml.stories.js ‎packages/treemap/stories/treemapHtml.stories.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { storiesOf } from '@storybook/react'
22
import { generateLibTree } from '@nivo/generators'
3+
// @ts-ignore
34
import { TreeMapHtml } from '../src'
45

56
const commonProperties = {

‎packages/treemap/tests/.eslintrc.yml

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
env:
2+
jest: true
3+
4+
rules:
5+
react/prop-types: 0

‎packages/treemap/tests/TreeMap.test.tsx

+534
Large diffs are not rendered by default.

‎website/src/data/components/treemap/props.ts

+5-12
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { commonDefaultProps as defaults } from '@nivo/treemap'
1+
import { commonDefaultProps as defaults, tileByType } from '@nivo/treemap'
22
import {
33
motionProperties,
44
defsProperties,
@@ -68,17 +68,10 @@ const props: ChartProperty[] = [
6868
defaultValue: 'squarify',
6969
control: {
7070
type: 'choices',
71-
choices: [
72-
{ label: 'binary', value: 'binary' },
73-
{ label: 'squarify', value: 'squarify' },
74-
{ label: 'slice', value: 'slice' },
75-
{ label: 'dice', value: 'dice' },
76-
{ label: 'sliceDice', value: 'sliceDice' },
77-
{
78-
label: 'resquarify',
79-
value: 'resquarify',
80-
},
81-
],
71+
choices: Object.keys(tileByType).map(tile => ({
72+
label: tile,
73+
value: tile,
74+
})),
8275
},
8376
},
8477
{

‎website/src/pages/treemap/canvas.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ import { graphql, useStaticQuery } from 'gatsby'
99

1010
interface Datum {
1111
name: string
12-
loc: number
12+
loc?: number
1313
color: string
14-
children: Datum[]
14+
children?: Datum[]
1515
}
1616

1717
const initialProperties = {

‎website/src/pages/treemap/html.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ import { generateLightDataSet } from '../../data/components/treemap/generator'
99

1010
interface Datum {
1111
name: string
12-
loc: number
12+
loc?: number
1313
color: string
14-
children: Datum[]
14+
children?: Datum[]
1515
}
1616

1717
const initialProperties = {

‎website/src/pages/treemap/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ const generateData = () => generateLightDataSet().root
1111

1212
interface Datum {
1313
name: string
14-
loc: number
14+
loc?: number
1515
color: string
16-
children: Datum[]
16+
children?: Datum[]
1717
}
1818

1919
const initialProperties = {

0 commit comments

Comments
 (0)
Please sign in to comment.