Skip to content

Commit

Permalink
feat(treemap): use hooks instead of recompose and migrate to react-sp…
Browse files Browse the repository at this point in the history 
…ring
  • Loading branch information
@plouc
plouc committed Jun 26, 2020
1 parent d969d83 commit 5ff360e
Show file tree
Hide file tree
Showing 21 changed files with 989 additions and 753 deletions.
19 changes: 19 additions & 0 deletions packages/treemap/index.d.ts
View file
@@ -0,0 +1,19 @@
/*
* This file is part of the nivo project.
*
* Copyright 2016-present, Raphaël Benitte.
*
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
import * as React from 'react'
import { Dimensions } from '@nivo/core'

declare module '@nivo/treemap' {
export interface TreeMapProps {
data: any
}

export class TreeMap extends React.Component<TreeMapProps & Dimensions> {}
export class ResponsiveTreeMap<T> extends React.Component<TreeMapProps> {}
}
4 changes: 2 additions & 2 deletions packages/treemap/package.json
View file
Expand Up @@ -19,15 +19,15 @@
"files": [
"README.md",
"LICENSE.md",
"index.d.ts",
"dist/"
],
"dependencies": {
"@nivo/colors": "0.62.0",
"@nivo/tooltip": "0.62.0",
"d3-hierarchy": "^1.1.8",
"lodash": "^4.17.11",
"react-motion": "^0.5.2",
"recompose": "^0.30.0"
"react-spring": "^8.0.27"
},
"peerDependencies": {
"@nivo/core": "0.62.0",
Expand Down
202 changes: 79 additions & 123 deletions packages/treemap/src/TreeMap.js
View file
Expand Up @@ -7,145 +7,101 @@
* file that was distributed with this source code.
*/
import React from 'react'
import { TransitionMotion, spring } from 'react-motion'
import { Container, SvgWrapper } from '@nivo/core'
import { interpolateColor, getInterpolatedColor } from '@nivo/colors'
import { TreeMapPropTypes } from './props'
import enhance from './enhance'
import { nodeWillEnter, nodeWillLeave } from './motion'
import { getNodeHandlers } from './interactivity'
import { SvgWrapper, withContainer, useDimensions } from '@nivo/core'
import { TreeMapDefaultProps, TreeMapPropTypes } from './props'
import { useTreeMap } from './hooks'
import TreeMapNodes from './TreeMapNodes'

const TreeMap = ({
nodes,
data,
identity,
value,
tile,
nodeComponent,

margin,
outerWidth,
outerHeight,

theme,
valueFormat,
innerPadding,
outerPadding,
leavesOnly,
width,
height,
margin: partialMargin,
colors,
colorBy,
nodeOpacity,
borderWidth,
getBorderColor,
borderColor,
defs,

getLabelTextColor,
enableLabel,
label,
labelTextColor,
orientLabel,

animate,
motionStiffness,
motionDamping,

labelSkipSize,
enableParentLabel,
parentLabel,
parentLabelSize,
parentLabelBackground,
parentLabelTextColor,
isInteractive,
onMouseEnter,
onMouseMove,
onMouseLeave,
onClick,
tooltipFormat,
tooltip,
}) => {
const springConfig = {
stiffness: motionStiffness,
damping: motionDamping,
}
const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions(
width,
height,
partialMargin
)

const getHandlers = (node, showTooltip, hideTooltip) =>
getNodeHandlers(node, {
isInteractive,
onClick,
showTooltip,
hideTooltip,
theme,
tooltipFormat,
tooltip,
})
const { nodes } = useTreeMap({
data,
identity,
value,
valueFormat,
leavesOnly,
width: innerWidth,
height: innerHeight,
tile,
innerPadding,
outerPadding,
colors,
colorBy,
nodeOpacity,
borderColor,
label,
labelTextColor,
orientLabel,
enableParentLabel,
parentLabel,
parentLabelSize,
parentLabelBackground,
parentLabelTextColor,
})

return (
<Container
isInteractive={isInteractive}
theme={theme}
animate={animate}
motionDamping={motionDamping}
motionStiffness={motionStiffness}
>
{({ showTooltip, hideTooltip }) => (
<SvgWrapper
width={outerWidth}
height={outerHeight}
margin={margin}
defs={defs}
theme={theme}
>
{!animate && (
<g>
{nodes.map(node =>
React.createElement(nodeComponent, {
key: node.path,
node,
style: {
fill: node.fill,
x: node.x0,
y: node.y0,
width: node.width,
height: node.height,
color: node.color,
borderWidth,
borderColor: getBorderColor(node),
labelTextColor: getLabelTextColor(node),
orientLabel,
},
handlers: getHandlers(node, showTooltip, hideTooltip),
theme,
})
)}
</g>
)}
{animate && (
<TransitionMotion
willEnter={nodeWillEnter}
willLeave={nodeWillLeave(springConfig)}
styles={nodes.map(node => ({
key: node.path,
data: node,
style: {
x: spring(node.x, springConfig),
y: spring(node.y, springConfig),
width: spring(node.width, springConfig),
height: spring(node.height, springConfig),
...interpolateColor(node.color, springConfig),
},
}))}
>
{interpolatedStyles => (
<g>
{interpolatedStyles.map(({ style, data: node }) => {
style.color = getInterpolatedColor(style)

return React.createElement(nodeComponent, {
key: node.path,
node,
style: {
...style,
fill: node.fill,
borderWidth,
borderColor: getBorderColor(style),
labelTextColor: getLabelTextColor(style),
orientLabel,
},
handlers: getHandlers(node, showTooltip, hideTooltip),
theme,
})
})}
</g>
)}
</TransitionMotion>
)}
</SvgWrapper>
)}
</Container>
<SvgWrapper width={outerWidth} height={outerHeight} margin={margin} defs={defs}>
<TreeMapNodes
nodes={nodes}
nodeComponent={nodeComponent}
borderWidth={borderWidth}
enableLabel={enableLabel}
labelSkipSize={labelSkipSize}
enableParentLabel={enableParentLabel}
isInteractive={isInteractive}
onMouseEnter={onMouseEnter}
onMouseMove={onMouseMove}
onMouseLeave={onMouseLeave}
onClick={onClick}
tooltip={tooltip}
/>
</SvgWrapper>
)
}

TreeMap.propTypes = TreeMapPropTypes
TreeMap.displayName = 'TreeMap'

const enhancedTreeMap = enhance(TreeMap)
enhancedTreeMap.displayName = 'TreeMap'
const WrappedTreeMap = withContainer(TreeMap)
WrappedTreeMap.defaultProps = TreeMapDefaultProps

export default enhancedTreeMap
export default WrappedTreeMap

0 comments on commit 5ff360e

Please sign in to comment.