feat(treemap): restore pattern and gradient support for TreeMap compo…

…nent
plouc · Jun 26, 2020 · 5e4ea12 · 5e4ea12
1 parent 4b3241c
commit 5e4ea12
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 14 deletions.
diff --git a/packages/treemap/src/TreeMap.js b/packages/treemap/src/TreeMap.js
@@ -7,7 +7,7 @@
  * file that was distributed with this source code.
  */
 import React from 'react'
-import { SvgWrapper, withContainer, useDimensions } from '@nivo/core'
+import { SvgWrapper, withContainer, useDimensions, bindDefs } from '@nivo/core'
 import { TreeMapDefaultProps, TreeMapPropTypes } from './props'
 import { useTreeMap } from './hooks'
 import TreeMapNodes from './TreeMapNodes'
@@ -31,6 +31,7 @@ const TreeMap = ({
     borderWidth,
     borderColor,
     defs,
+    fill,
     enableLabel,
     label,
     labelTextColor,
@@ -81,8 +82,10 @@ const TreeMap = ({
         parentLabelTextColor,
     })
 
+    const boundDefs = bindDefs(defs, nodes, fill)
+
     return (
-        <SvgWrapper width={outerWidth} height={outerHeight} margin={margin} defs={defs}>
+        <SvgWrapper width={outerWidth} height={outerHeight} margin={margin} defs={boundDefs}>
             <TreeMapNodes
                 nodes={nodes}
                 nodeComponent={nodeComponent}

diff --git a/packages/treemap/stories/treemap.stories.js b/packages/treemap/stories/treemap.stories.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { generateLibTree } from '@nivo/generators'
+import { linearGradientDef, patternDotsDef } from '@nivo/core'
 import { TreeMap } from '../src'
 
 const commonProperties = {
@@ -10,11 +11,12 @@ const commonProperties = {
     identity: 'name',
     value: 'loc',
     valueFormat: '.02s',
-    label: 'name',
-    labelSkipRadius: 16,
+    labelSkipSize: 16,
 }
 
-storiesOf('TreeMap', module).add('custom tooltip', () => (
+const stories = storiesOf('TreeMap', module)
+
+stories.add('custom tooltip', () => (
     <TreeMap
         {...commonProperties}
         tooltip={({ node }) => (
@@ -31,3 +33,42 @@ storiesOf('TreeMap', module).add('custom tooltip', () => (
         }}
     />
 ))
+
+stories.add('patterns & gradients', () => (
+    <TreeMap
+        {...commonProperties}
+        nodeOpacity={1}
+        labelTextColor={{
+            from: 'color',
+            modifiers: [['darker', 3]],
+        }}
+        parentLabelTextColor={{
+            from: 'color',
+            modifiers: [['darker', 3]],
+        }}
+        defs={[
+            linearGradientDef('gradient', [
+                { offset: 0, color: '#ffffff' },
+                { offset: 15, color: 'inherit' },
+                { offset: 100, color: 'inherit' },
+            ]),
+            patternDotsDef('pattern', {
+                background: 'inherit',
+                color: '#ffffff',
+                size: 1,
+                padding: 4,
+                stagger: true,
+            }),
+        ]}
+        fill={[
+            {
+                match: node => ['viz', 'text', 'utils'].includes(node.pathComponents[1]),
+                id: 'gradient',
+            },
+            {
+                match: node => ['set', 'generators', 'misc'].includes(node.pathComponents[1]),
+                id: 'pattern',
+            },
+        ]}
+    />
+))
diff --git a/website/src/components/guides/gradients/GradientsIllustrations.js b/website/src/components/guides/gradients/GradientsIllustrations.js
@@ -80,19 +80,20 @@ const GradientsIllustrations = () => {
                 <div className="guide__illustrations__item">
                     <ResponsiveTreeMap
                         margin={{ top: -2, right: -2, bottom: -2, left: -2 }}
-                        root={{
+                        data={{
                             country: 'root',
                             children: generateCountriesData(['value'], { size: 9 }),
                         }}
                         colors={{ scheme: 'spectral' }}
-                        colorBy="country"
+                        colorBy="path"
                         identity="country"
-                        value="value"
                         leavesOnly={false}
                         borderWidth={1}
+                        nodeOpacity={1}
                         borderColor={{ theme: 'background' }}
-                        outerPadding={6}
+                        outerPadding={10}
                         innerPadding={4}
+                        enableParentLabel={false}
                         isInteractive={false}
                         animate={false}
                         enableLabel={false}

diff --git a/website/src/components/guides/patterns/PatternsIllustrations.js b/website/src/components/guides/patterns/PatternsIllustrations.js
@@ -117,22 +117,23 @@ const PatternsIllustrations = () => {
                 <div className="guide__illustrations__item">
                     <ResponsiveTreeMap
                         margin={{ top: -2, right: -2, bottom: -2, left: -2 }}
-                        root={{
+                        data={{
                             country: 'root',
                             children: generateCountriesData(['value'], { size: 9 }),
                         }}
                         identity="country"
-                        value="value"
                         leavesOnly={true}
                         colors={{ scheme: 'spectral' }}
-                        colorBy="country"
+                        colorBy="id"
                         borderWidth={4}
-                        outerPadding={8}
-                        innerPadding={8}
+                        outerPadding={10}
+                        innerPadding={4}
+                        nodeOpacity={1}
                         borderColor="inherit"
                         isInteractive={false}
                         animate={false}
                         enableLabel={false}
+                        enableParentLabel={false}
                         defs={[
                             patternLinesDef('example3.lines', {
                                 rotation: -45,

diff --git a/website/src/data/components/treemap/meta.yml b/website/src/data/components/treemap/meta.yml
@@ -17,6 +17,8 @@ TreeMap:
   stories:
     - label: Using custom tooltip
       link: treemap--custom-tooltip
+    - label: Patterns & Gradients
+      link: treemap--patterns-gradients
   description: |
     A tree map component using
     [d3-hierarchy.treemap](https://github.com/d3/d3-hierarchy#treemap),