feat(treemap): get rid of data nesting when using animated treemap

plouc · Aug 7, 2017 · 507dcb6 · 507dcb6
1 parent b687ec8
commit 507dcb6
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 89 deletions.
diff --git a/src/components/charts/treemap/TreeMap.js b/src/components/charts/treemap/TreeMap.js
@@ -50,7 +50,7 @@ const createNodes = ({
                         width={node.style.width}
                         height={node.style.height}
                         fill={node.style.color}
-                        stroke={borderColor(node.data)}
+                        stroke={borderColor({ ...node.data, color: node.style.color })}
                         strokeWidth={borderWidth}
                     />
                     {shouldRenderLabel &&
@@ -63,7 +63,7 @@ const createNodes = ({
                                 textAnchor="middle"
                                 dy="0.5em"
                                 style={{
-                                    fill: textColor(node.data),
+                                    fill: textColor({ ...node.data, color: node.style.color }),
                                 }}
                             >
                                 {label(node.data)}

diff --git a/src/components/charts/treemap/TreeMapHTML.js b/src/components/charts/treemap/TreeMapHTML.js
@@ -58,18 +58,18 @@ const createNodes = ({
                         justifyContent: 'center',
                         borderWidth: borderWidth,
                         borderStyle: 'solid',
-                        borderColor: borderColorFn(node.data),
+                        borderColor: borderColorFn({ ...node.data, color: node.style.color }),
                     }}
                 >
                     {shouldRenderLabel &&
                         <span
                             className="nivo_treemap_node_label"
                             style={{
-                                color: textColorFn(node.data),
+                                color: textColorFn({ ...node.data, color: node.style.color }),
                                 transform: `rotate(${rotate ? '-90' : '0'}deg)`,
                             }}
                         >
-                            {label(node.data.data)}
+                            {label(node.data)}
                         </span>}
                 </div>
             )
@@ -79,7 +79,11 @@ const createNodes = ({
     }
 }
 
-class TreeMapHTML extends Component {
+export default class TreeMapHTML extends Component {
+    static propTypes = _.omit(treeMapPropTypes, ['children', 'namespace'])
+
+    static defaultProps = _.omit(treeMapDefaultProps, [])
+
     render() {
         return (
             <TreeMapPlaceholders {...this.props} namespace="html">
@@ -88,9 +92,3 @@ class TreeMapHTML extends Component {
         )
     }
 }
-
-TreeMapHTML.propTypes = _.omit(treeMapPropTypes, ['children', 'namespace'])
-
-TreeMapHTML.defaultProps = _.omit(treeMapDefaultProps, [])
-
-export default TreeMapHTML
diff --git a/src/components/charts/treemap/TreeMapPlaceholders.js b/src/components/charts/treemap/TreeMapPlaceholders.js
@@ -11,17 +11,27 @@ import { findDOMNode } from 'react-dom'
 import _ from 'lodash'
 import { TransitionMotion, spring } from 'react-motion'
 import Nivo from '../../../Nivo'
-import TreeMapHelper from '../../../lib/charts/treemap/TreeMapHelper'
+import { computeTreeMap } from '../../../lib/charts/treemap/TreeMapHelper'
 import { convertGetter } from '../../../lib/propertiesConverters'
 import { treeMapPropTypes, treeMapDefaultProps } from './TreeMapProps'
 import { getColorsGenerator, extractRGB } from '../../../lib/colorUtils'
 
-class TreeMapPlaceholders extends Component {
-    componentWillMount() {
-        this.treemap = TreeMapHelper()
-    }
-
-    willEnter({ data: node }) {
+export default class TreeMapPlaceholders extends Component {
+    static propTypes = _.omit(treeMapPropTypes, [
+        'orientLabels',
+        'skipVMin',
+        'transitionDuration',
+        'transitionEasing',
+    ])
+
+    static defaultProps = _.omit(treeMapDefaultProps, [
+        'orientLabels',
+        'skipVMin',
+        'transitionDuration',
+        'transitionEasing',
+    ])
+
+    nodeWillEnter({ data: node }) {
         const width = node.x1 - node.x0
         const height = node.y1 - node.y0
 
@@ -92,7 +102,7 @@ class TreeMapPlaceholders extends Component {
             }
         }
 
-        const nodes = this.treemap.compute({
+        const nodes = computeTreeMap({
             width,
             height,
             root,
@@ -141,11 +151,11 @@ class TreeMapPlaceholders extends Component {
             wrapperTag,
             wrapperProps,
             <TransitionMotion
-                willEnter={this.willEnter}
+                willEnter={this.nodeWillEnter}
                 styles={nodes.map(node => {
                     return {
                         key: node.data.key,
-                        data: node,
+                        data: node.data,
                         style: {
                             x: spring(node.x0, springConfig),
                             y: spring(node.y0, springConfig),
@@ -184,19 +194,3 @@ class TreeMapPlaceholders extends Component {
         )
     }
 }
-
-TreeMapPlaceholders.propTypes = _.omit(treeMapPropTypes, [
-    'orientLabels',
-    'skipVMin',
-    'transitionDuration',
-    'transitionEasing',
-])
-
-TreeMapPlaceholders.defaultProps = _.omit(treeMapDefaultProps, [
-    'orientLabels',
-    'skipVMin',
-    'transitionDuration',
-    'transitionEasing',
-])
-
-export default TreeMapPlaceholders
diff --git a/src/lib/charts/treemap/TreeMapHelper.js b/src/lib/charts/treemap/TreeMapHelper.js
@@ -7,6 +7,7 @@
  * file that was distributed with this source code.
  */
 
+import _ from 'lodash'
 import {
     treemap as Treemap,
     hierarchy,
@@ -28,60 +29,45 @@ export const tilingMethods = {
 }
 
 /**
- * This wrapper is responsible for computing treemap chart positions.
- * It's used for all TreeMap related chart components.
- *
- * @returns {{ compute: (function) }}
- * @constructor
+ * @param {number}   width
+ * @param {number}   height
+ * @param {object}   _root
+ * @param {boolean}  leavesOnly
+ * @param {string}   tile
+ * @param {number}   innerPadding
+ * @param {number}   outerPadding
+ * @param {function} identity
+ * @param {function} value
+ * @param {function} color
  */
-const TreeMapHelper = () => {
+export const computeTreeMap = ({
+    width,
+    height,
+    root: _root,
+    leavesOnly,
+    tile,
+    innerPadding,
+    outerPadding,
+    identity,
+    value,
+    color,
+}) => {
     const treemap = Treemap()
+        .size([width, height])
+        .tile(tilingMethods[tile])
+        .round(true)
+        .paddingInner(innerPadding)
+        .paddingOuter(outerPadding)
 
-    return {
-        /**
-         * @param {number}   width
-         * @param {number}   height
-         * @param {object}   _root
-         * @param {boolean}  leavesOnly
-         * @param {string}   tile
-         * @param {number}   innerPadding
-         * @param {number}   outerPadding
-         * @param {function} identity
-         * @param {function} value
-         * @param {function} color
-         */
-        compute({
-            width,
-            height,
-            root: _root,
-            leavesOnly,
-            tile,
-            innerPadding,
-            outerPadding,
-            identity,
-            value,
-            color,
-        }) {
-            treemap
-                .size([width, height])
-                .tile(tilingMethods[tile])
-                .round(true)
-                .paddingInner(innerPadding)
-                .paddingOuter(outerPadding)
-
-            const root = treemap(hierarchy(_root).sum(value))
+    const root = treemap(hierarchy(_root).sum(value))
 
-            const nodes = leavesOnly ? root.leaves() : root.descendants()
+    const nodes = leavesOnly ? root.leaves() : root.descendants()
 
-            return nodes.map(d => {
-                d.color = color({ ...d.data, depth: d.depth })
+    return nodes.map(d => {
+        d.color = color({ ...d.data, depth: d.depth })
 
-                d.data.key = d.ancestors().map(a => identity(a.data)).join('.')
+        d.data.key = d.ancestors().map(a => identity(a.data)).join('.')
 
-                return d
-            })
-        },
-    }
+        return d
+    })
 }
-
-export default TreeMapHelper
diff --git a/src/lib/propertiesConverters.js b/src/lib/propertiesConverters.js
@@ -25,8 +25,6 @@ export const convertLabel = (_label, labelFormat) => {
     return data => {
         let labelOutput = label(data)
 
-        console.log('labelOutput', labelOutput)
-
         if (formatter) {
             labelOutput = formatter(labelOutput)
         }