feat(treemap): datum now just extends object

packages/core/package.json

@@ -24,7 +24,6 @@
     "@react-spring/web": "9.3.1",
     "d3-color": "^2.0.0",
     "d3-format": "^1.4.4",
-    "d3-hierarchy": "^1.1.8",
     "d3-interpolate": "^2.0.1",
     "d3-scale": "^3.2.3",
     "d3-scale-chromatic": "^2.0.0",

packages/core/src/props/index.js

@@ -32,4 +32,3 @@ export * from './colors'
 export * from './curve'
 export * from './defs'
 export * from './stack'
-export * from './treeMap'

packages/static/src/mappings/treemap.ts

@@ -1,13 +1,13 @@
 import { FunctionComponent } from 'react'
 import Joi from 'joi'
 import { Dimensions } from '@nivo/core'
-import { TreeMap, TreeMapSvgProps, DefaultTreeMapDatum, TreeMapDatum } from '@nivo/treemap'
+import { TreeMap, TreeMapSvgProps, DefaultTreeMapDatum } from '@nivo/treemap'
 import { custom } from './common'
 import { ordinalColors, inheritedColor } from './commons/colors'
 import { dimensions } from './commons/dimensions'
 import { OmitStrict } from '../types'
 
-export type TreeMapApiProps<Datum extends TreeMapDatum = DefaultTreeMapDatum> = OmitStrict<
+export type TreeMapApiProps<Datum = DefaultTreeMapDatum> = OmitStrict<
     TreeMapSvgProps<Datum> & Dimensions,
     | 'isInteractive'
     | 'onMouseEnter'

packages/treemap/src/ResponsiveTreeMap.tsx

@@ -1,8 +1,8 @@
 import { ResponsiveWrapper } from '@nivo/core'
-import { DefaultTreeMapDatum, TreeMapDatum, TreeMapSvgProps } from './types'
+import { DefaultTreeMapDatum, TreeMapSvgProps } from './types'
 import { TreeMap } from './TreeMap'
 
-export const ResponsiveTreeMap = <Datum extends TreeMapDatum = DefaultTreeMapDatum>(
+export const ResponsiveTreeMap = <Datum extends object = DefaultTreeMapDatum>(
     props: Omit<TreeMapSvgProps<Datum>, 'height' | 'width'>
 ) => (
     <ResponsiveWrapper>

packages/treemap/src/ResponsiveTreeMapCanvas.tsx

@@ -1,8 +1,8 @@
 import { ResponsiveWrapper } from '@nivo/core'
-import { DefaultTreeMapDatum, TreeMapDatum, TreeMapCanvasProps } from './types'
+import { DefaultTreeMapDatum, TreeMapCanvasProps } from './types'
 import { TreeMapCanvas } from './TreeMapCanvas'
 
-export const ResponsiveTreeMapCanvas = <Datum extends TreeMapDatum = DefaultTreeMapDatum>(
+export const ResponsiveTreeMapCanvas = <Datum extends object = DefaultTreeMapDatum>(
     props: Omit<TreeMapCanvasProps<Datum>, 'height' | 'width'>
 ) => (
     <ResponsiveWrapper>

packages/treemap/src/ResponsiveTreeMapHtml.tsx

@@ -1,8 +1,8 @@
 import { ResponsiveWrapper } from '@nivo/core'
-import { DefaultTreeMapDatum, TreeMapDatum, TreeMapHtmlProps } from './types'
+import { DefaultTreeMapDatum, TreeMapHtmlProps } from './types'
 import { TreeMapHtml } from './TreeMapHtml'
 
-export const ResponsiveTreeMapHtml = <Datum extends TreeMapDatum = DefaultTreeMapDatum>(
+export const ResponsiveTreeMapHtml = <Datum extends object = DefaultTreeMapDatum>(
     props: Omit<TreeMapHtmlProps<Datum>, 'height' | 'width'>
 ) => (
     <ResponsiveWrapper>

packages/treemap/src/TreeMap.tsx

@@ -7,57 +7,51 @@ import {
 } from '@nivo/core'
 import { useTreeMap } from './hooks'
 import { TreeMapNodes } from './TreeMapNodes'
-import {
-    DefaultTreeMapDatum,
-    NodeComponent,
-    TreeMapCommonProps,
-    TreeMapDatum,
-    TreeMapSvgProps,
-} from './types'
+import { DefaultTreeMapDatum, NodeComponent, TreeMapCommonProps, TreeMapSvgProps } from './types'
 import { svgDefaultProps } from './defaults'
 
-type InnerTreeMapProps<Datum extends TreeMapDatum> = Omit<
+type InnerTreeMapProps<Datum extends object> = Omit<
     TreeMapSvgProps<Datum>,
     'animate' | 'motionConfig' | 'renderWrapper' | 'theme'
 >
 
-const InnerTreeMap = <Datum extends TreeMapDatum>({
+const InnerTreeMap = <Datum extends object>({
     data,
     identity = svgDefaultProps.identity as TreeMapCommonProps<Datum>['identity'],
     value = svgDefaultProps.value as TreeMapCommonProps<Datum>['value'],
     valueFormat,
     tile = svgDefaultProps.tile,
-    nodeComponent = svgDefaultProps.nodeComponent as unknown as NodeComponent<Datum>,
+    nodeComponent = svgDefaultProps.nodeComponent as NodeComponent<Datum>,
     innerPadding = svgDefaultProps.innerPadding,
     outerPadding = svgDefaultProps.outerPadding,
     leavesOnly = svgDefaultProps.leavesOnly,
     width,
     height,
     margin: partialMargin,
     colors = svgDefaultProps.colors as TreeMapCommonProps<Datum>['colors'],
-    colorBy = svgDefaultProps.colorBy,
+    colorBy = svgDefaultProps.colorBy as TreeMapCommonProps<Datum>['colorBy'],
     nodeOpacity = svgDefaultProps.nodeOpacity,
     borderWidth = svgDefaultProps.borderWidth,
     borderColor = svgDefaultProps.borderColor as TreeMapCommonProps<Datum>['borderColor'],
     defs = svgDefaultProps.defs,
     fill = svgDefaultProps.fill,
     enableLabel = svgDefaultProps.enableLabel,
     label = svgDefaultProps.label as TreeMapCommonProps<Datum>['label'],
-    labelTextColor = svgDefaultProps.labelTextColor,
+    labelTextColor = svgDefaultProps.labelTextColor as TreeMapCommonProps<Datum>['labelTextColor'],
     orientLabel = svgDefaultProps.orientLabel,
     labelSkipSize = svgDefaultProps.labelSkipSize,
     enableParentLabel = svgDefaultProps.enableParentLabel,
     parentLabel = svgDefaultProps.parentLabel as TreeMapCommonProps<Datum>['parentLabel'],
     parentLabelSize = svgDefaultProps.parentLabelSize,
     parentLabelPosition = svgDefaultProps.parentLabelPosition,
     parentLabelPadding = svgDefaultProps.parentLabelPadding,
-    parentLabelTextColor = svgDefaultProps.parentLabelTextColor,
+    parentLabelTextColor = svgDefaultProps.parentLabelTextColor as TreeMapCommonProps<Datum>['parentLabelTextColor'],
     isInteractive = svgDefaultProps.isInteractive,
     onMouseEnter,
     onMouseMove,
     onMouseLeave,
     onClick,
-    tooltip = svgDefaultProps.tooltip as unknown as TreeMapCommonProps<Datum>['tooltip'],
+    tooltip = svgDefaultProps.tooltip as TreeMapCommonProps<Datum>['tooltip'],
     role,
     ariaLabel,
     ariaLabelledBy,
@@ -126,7 +120,7 @@ const InnerTreeMap = <Datum extends TreeMapDatum>({
     )
 }
 
-export const TreeMap = <Datum extends TreeMapDatum = DefaultTreeMapDatum>({
+export const TreeMap = <Datum extends object = DefaultTreeMapDatum>({
     isInteractive = svgDefaultProps.isInteractive,
     animate = svgDefaultProps.animate,
     motionConfig = svgDefaultProps.motionConfig,

packages/treemap/src/TreeMapCanvas.tsx

@@ -10,16 +10,10 @@ import {
 } from '@nivo/core'
 import { useTooltip } from '@nivo/tooltip'
 import { useTreeMap } from './hooks'
-import {
-    ComputedNode,
-    DefaultTreeMapDatum,
-    TreeMapCanvasProps,
-    TreeMapCommonProps,
-    TreeMapDatum,
-} from './types'
+import { ComputedNode, DefaultTreeMapDatum, TreeMapCanvasProps, TreeMapCommonProps } from './types'
 import { canvasDefaultProps } from './defaults'
 
-const findNodeUnderCursor = <Datum extends TreeMapDatum>(
+const findNodeUnderCursor = <Datum extends object>(
     nodes: ComputedNode<Datum>[],
     margin: Margin,
     x: number,
@@ -29,12 +23,12 @@ const findNodeUnderCursor = <Datum extends TreeMapDatum>(
         isCursorInRect(node.x + margin.left, node.y + margin.top, node.width, node.height, x, y)
     )
 
-type InnerTreeMapCanvasProps<Datum extends TreeMapDatum> = Omit<
+type InnerTreeMapCanvasProps<Datum extends object> = Omit<
     TreeMapCanvasProps<Datum>,
     'renderWrapper' | 'theme'
 >
 
-const InnerTreeMapCanvas = <Datum extends TreeMapDatum>({
+const InnerTreeMapCanvas = <Datum extends object>({
     data,
     identity = canvasDefaultProps.identity as TreeMapCommonProps<Datum>['identity'],
     value = canvasDefaultProps.identity as TreeMapCommonProps<Datum>['value'],
@@ -47,19 +41,19 @@ const InnerTreeMapCanvas = <Datum extends TreeMapDatum>({
     height,
     margin: partialMargin,
     colors = canvasDefaultProps.colors as TreeMapCommonProps<Datum>['colors'],
-    colorBy = canvasDefaultProps.colorBy,
+    colorBy = canvasDefaultProps.colorBy as TreeMapCommonProps<Datum>['colorBy'],
     nodeOpacity = canvasDefaultProps.nodeOpacity,
     borderWidth = canvasDefaultProps.borderWidth,
     borderColor = canvasDefaultProps.borderColor as TreeMapCommonProps<Datum>['borderColor'],
     enableLabel = canvasDefaultProps.enableLabel,
     label = canvasDefaultProps.label as TreeMapCommonProps<Datum>['label'],
-    labelTextColor = canvasDefaultProps.labelTextColor,
+    labelTextColor = canvasDefaultProps.labelTextColor as TreeMapCommonProps<Datum>['labelTextColor'],
     orientLabel = canvasDefaultProps.orientLabel,
     labelSkipSize = canvasDefaultProps.labelSkipSize,
     isInteractive = canvasDefaultProps.isInteractive,
     onMouseMove,
     onClick,
-    tooltip = canvasDefaultProps.tooltip as unknown as TreeMapCommonProps<Datum>['tooltip'],
+    tooltip = canvasDefaultProps.tooltip as TreeMapCommonProps<Datum>['tooltip'],
     pixelRatio = canvasDefaultProps.pixelRatio,
     role,
     ariaLabel,
@@ -100,11 +94,12 @@ const InnerTreeMapCanvas = <Datum extends TreeMapDatum>({
     useEffect(() => {
         if (canvasEl.current === null) return
 
+        const ctx = canvasEl.current.getContext('2d')
+        if (ctx === null) return
+
         canvasEl.current.width = outerWidth * pixelRatio
         canvasEl.current.height = outerHeight * pixelRatio
 
-        const ctx = canvasEl.current.getContext('2d')!
-
         ctx.scale(pixelRatio, pixelRatio)
 
         ctx.fillStyle = theme.background
@@ -220,7 +215,7 @@ const InnerTreeMapCanvas = <Datum extends TreeMapDatum>({
     )
 }
 
-export const TreeMapCanvas = <Datum extends TreeMapDatum = DefaultTreeMapDatum>({
+export const TreeMapCanvas = <Datum extends object = DefaultTreeMapDatum>({
     theme,
     isInteractive = canvasDefaultProps.isInteractive,
     animate = canvasDefaultProps.animate,

packages/treemap/src/TreeMapHtml.tsx

@@ -1,15 +1,15 @@
 import { Container, useDimensions } from '@nivo/core'
 import { useTreeMap } from './hooks'
 import { TreeMapNodes } from './TreeMapNodes'
-import { DefaultTreeMapDatum, TreeMapCommonProps, TreeMapDatum, TreeMapHtmlProps } from './types'
+import { DefaultTreeMapDatum, TreeMapCommonProps, TreeMapHtmlProps } from './types'
 import { htmlDefaultProps } from './defaults'
 
-type InnerTreeMapHtmlProps<Datum extends TreeMapDatum> = Omit<
+type InnerTreeMapHtmlProps<Datum extends object> = Omit<
     TreeMapHtmlProps<Datum>,
     'animate' | 'motionConfig' | 'renderWrapper' | 'theme'
 >
 
-const InnerTreeMapHtml = <Datum extends TreeMapDatum>({
+const InnerTreeMapHtml = <Datum extends object>({
     data,
     identity = htmlDefaultProps.identity as TreeMapCommonProps<Datum>['identity'],
     value = htmlDefaultProps.value as TreeMapCommonProps<Datum>['value'],
@@ -23,27 +23,27 @@ const InnerTreeMapHtml = <Datum extends TreeMapDatum>({
     height,
     margin: partialMargin,
     colors = htmlDefaultProps.colors as TreeMapCommonProps<Datum>['colors'],
-    colorBy = htmlDefaultProps.colorBy,
+    colorBy = htmlDefaultProps.colorBy as TreeMapCommonProps<Datum>['colorBy'],
     nodeOpacity = htmlDefaultProps.nodeOpacity,
     borderWidth = htmlDefaultProps.borderWidth,
     borderColor = htmlDefaultProps.borderColor as TreeMapCommonProps<Datum>['borderColor'],
     enableLabel = htmlDefaultProps.enableLabel,
     label = htmlDefaultProps.label as TreeMapCommonProps<Datum>['label'],
-    labelTextColor = htmlDefaultProps.labelTextColor,
+    labelTextColor = htmlDefaultProps.labelTextColor as TreeMapCommonProps<Datum>['labelTextColor'],
     orientLabel = htmlDefaultProps.orientLabel,
     labelSkipSize = htmlDefaultProps.labelSkipSize,
     enableParentLabel = htmlDefaultProps.enableParentLabel,
     parentLabel = htmlDefaultProps.parentLabel as TreeMapCommonProps<Datum>['parentLabel'],
     parentLabelSize = htmlDefaultProps.parentLabelSize,
     parentLabelPosition = htmlDefaultProps.parentLabelPosition,
     parentLabelPadding = htmlDefaultProps.parentLabelPadding,
-    parentLabelTextColor = htmlDefaultProps.parentLabelTextColor,
+    parentLabelTextColor = htmlDefaultProps.parentLabelTextColor as TreeMapCommonProps<Datum>['parentLabelTextColor'],
     isInteractive = htmlDefaultProps.isInteractive,
     onMouseEnter,
     onMouseMove,
     onMouseLeave,
     onClick,
-    tooltip = htmlDefaultProps.tooltip as unknown as TreeMapCommonProps<Datum>['tooltip'],
+    tooltip = htmlDefaultProps.tooltip as TreeMapCommonProps<Datum>['tooltip'],
     role,
     ariaLabel,
     ariaLabelledBy,
@@ -113,7 +113,7 @@ const InnerTreeMapHtml = <Datum extends TreeMapDatum>({
     )
 }
 
-export const TreeMapHtml = <Datum extends TreeMapDatum = DefaultTreeMapDatum>({
+export const TreeMapHtml = <Datum extends object = DefaultTreeMapDatum>({
     isInteractive = htmlDefaultProps.isInteractive,
     animate = htmlDefaultProps.animate,
     motionConfig = htmlDefaultProps.motionConfig,

packages/treemap/src/TreeMapHtmlNode.tsx

@@ -1,18 +1,10 @@
 import { memo } from 'react'
 import { animated } from '@react-spring/web'
 import { useTheme } from '@nivo/core'
-import { NodeProps, TreeMapDatum } from './types'
+import { NodeProps } from './types'
 import { htmlNodeTransform, htmlLabelTransform } from './transitions'
 
-/*
-parentLabelHtmlTransform: `translate(${
-    node.parentLabelX - (node.parentLabelRotation === 0 ? 0 : 5)
-}px,${node.parentLabelY - (node.parentLabelRotation === 0 ? 5 : 0)}px) rotate(${
-    node.parentLabelRotation
-}deg)`,
-*/
-
-const NonMemoizedTreeMapHtmlNode = <Datum extends TreeMapDatum>({
+const NonMemoizedTreeMapHtmlNode = <Datum extends object>({
     node,
     animatedProps,
     borderWidth,

packages/treemap/src/TreeMapNode.tsx

@@ -1,10 +1,10 @@
 import { memo } from 'react'
 import { animated, to } from '@react-spring/web'
 import { useTheme } from '@nivo/core'
-import { NodeProps, TreeMapDatum } from './types'
+import { NodeProps } from './types'
 import { svgNodeTransform, svgLabelTransform } from './transitions'
 
-const NonMemoizedTreeMapNode = <Datum extends TreeMapDatum>({
+const NonMemoizedTreeMapNode = <Datum extends object>({
     node,
     animatedProps,
     borderWidth,

packages/treemap/src/TreeMapNodeTooltip.tsx

@@ -1,10 +1,8 @@
 import { memo } from 'react'
 import { BasicTooltip } from '@nivo/tooltip'
-import { TreeMapDatum, TooltipProps } from './types'
+import { TooltipProps } from './types'
 
-const NonMemoizedTreeMapNodeTooltip = <Datum extends TreeMapDatum>({
-    node,
-}: TooltipProps<Datum>) => (
+const NonMemoizedTreeMapNodeTooltip = <Datum extends object>({ node }: TooltipProps<Datum>) => (
     <BasicTooltip id={node.id} value={node.formattedValue} enableChip={true} color={node.color} />
 )