Skip to content

Commit

Permalink
feat(treemap): restore pattern and gradient support for TreeMap compo…
Browse files Browse the repository at this point in the history
…nent
plouc committed Jun 26, 2020

Verified

This commit was signed with the committer’s verified signature.
doppins-bot Doppins
1 parent 4b3241c commit 5e4ea12
Showing 5 changed files with 62 additions and 14 deletions.
7 changes: 5 additions & 2 deletions packages/treemap/src/TreeMap.js
Original file line number Diff line number Diff line change
@@ -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}
47 changes: 44 additions & 3 deletions packages/treemap/stories/treemap.stories.js
Original file line number Diff line number Diff line change
@@ -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',
},
]}
/>
))
Original file line number Diff line number Diff line change
@@ -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}
11 changes: 6 additions & 5 deletions website/src/components/guides/patterns/PatternsIllustrations.js
Original file line number Diff line number Diff line change
@@ -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,
2 changes: 2 additions & 0 deletions website/src/data/components/treemap/meta.yml
Original file line number Diff line number Diff line change
@@ -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),

0 comments on commit 5e4ea12

Please sign in to comment.