Skip to content

Commit

Permalink
Merge pull request #524 from hshoff/chris--typescript-vx-hierarchy
Browse files Browse the repository at this point in the history 
typescript(vx-hierarchy): re-write package in TypeScript
  • Loading branch information
@hshoff
hshoff authored Oct 9, 2019
2 parents 85df5d0 + c680f76 commit a381159
Show file tree
Hide file tree
Showing 25 changed files with 765 additions and 453 deletions.
156 changes: 103 additions & 53 deletions packages/vx-demo/src/components/tiles/treemap.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,16 @@
import React from 'react';
import { Group } from '@vx/group';
import { Treemap } from '@vx/hierarchy';
import { hierarchy, stratify, treemapSquarify } from 'd3-hierarchy';
import {
Treemap,
hierarchy,
stratify,
treemapSquarify,
treemapBinary,
treemapDice,
treemapResquarify,
treemapSlice,
treemapSliceDice,
} from '@vx/hierarchy';
import { shakespeare } from '@vx/mock-data';

import { scaleLinear } from '@vx/scale';
Expand All @@ -20,59 +29,100 @@ const data = stratify()
.parentId(d => d.parent)(shakespeare)
.sum(d => d.size || 0);

export default ({
width,
height,
// events = false,
margin = {
top: 0,
left: 30,
right: 40,
bottom: 80,
},
}) => {
if (width < 10) return null;
const tileMethods = {
treemapSquarify,
treemapBinary,
treemapDice,
treemapResquarify,
treemapSlice,
treemapSliceDice,
};

export default class extends React.Component {
state = {
tileMethod: 'treemapSquarify',
};

render() {
const {
width,
height,
// events = false,
margin = {
top: 0,
left: 30,
right: 40,
bottom: 80,
},
} = this.props;

const yMax = height - margin.top - margin.bottom;
const root = hierarchy(data).sort((a, b) => b.value - a.value);
const { tileMethod } = this.state;

return (
<svg width={width} height={height}>
<rect width={width} height={height} rx={14} fill={bg} />
<Treemap top={margin.top} root={root} size={[width, yMax]} tile={treemapSquarify} round>
{treemap => {
const nodes = treemap.descendants().reverse();
return (
<Group>
{nodes.map((node, i) => {
const nodeWidth = node.x1 - node.x0;
const nodeHeight = node.y1 - node.y0;
if (width < 10) return null;

const yMax = height - margin.top - margin.bottom;
const root = hierarchy(data).sort((a, b) => b.value - a.value);

return (
<div>
<label>tile method</label>{' '}
<select
onClick={e => e.stopPropagation()}
onChange={e => this.setState({ tileMethod: e.target.value })}
value={tileMethod}
>
{Object.keys(tileMethods).map(tile => (
<option key={tile} value={tile}>
{tile}
</option>
))}
</select>
<div>
<svg width={width} height={height}>
<rect width={width} height={height} rx={14} fill={bg} />
<Treemap
top={margin.top}
root={root}
size={[width, yMax]}
tile={tileMethods[tileMethod]}
round
>
{treemap => {
const nodes = treemap.descendants().reverse();
return (
<Group key={`node-${i}`} top={node.y0} left={node.x0}>
{node.depth === 1 && (
<rect
width={nodeWidth}
height={nodeHeight}
stroke={bg}
strokeWidth={4}
fill="transparent"
/>
)}
{node.depth > 2 && (
<rect
width={nodeWidth}
height={nodeHeight}
stroke={bg}
fill={colorScale(node.value)}
/>
)}
<Group>
{nodes.map((node, i) => {
const nodeWidth = node.x1 - node.x0;
const nodeHeight = node.y1 - node.y0;
return (
<Group key={`node-${i}`} top={node.y0} left={node.x0}>
{node.depth === 1 && (
<rect
width={nodeWidth}
height={nodeHeight}
stroke={bg}
strokeWidth={4}
fill="transparent"
/>
)}
{node.depth > 2 && (
<rect
width={nodeWidth}
height={nodeHeight}
stroke={bg}
fill={colorScale(node.value)}
/>
)}
</Group>
);
})}
</Group>
);
})}
</Group>
);
}}
</Treemap>
</svg>
);
};
}}
</Treemap>
</svg>
</div>
</div>
);
}
}
165 changes: 107 additions & 58 deletions packages/vx-demo/src/pages/treemap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,19 @@ export default () => {
<Show component={Treemap} title="Treemap">
{`import React from 'react';
import { Group } from '@vx/group';
import { Treemap } from '@vx/hierarchy';
import { hierarchy, stratify } from 'd3-hierarchy';
import {
Treemap,
hierarchy,
stratify,
treemapSquarify,
treemapBinary,
treemapDice,
treemapResquarify,
treemapSlice,
treemapSliceDice,
} from '@vx/hierarchy';
import { shakespeare } from '@vx/mock-data';
import { treemapSquarify } from 'd3-hierarchy';
import { scaleLinear } from '@vx/scale';
const blue = '#0373d9';
Expand All @@ -19,72 +28,112 @@ const bg = '#3436b8';
const colorScale = scaleLinear({
domain: [0, Math.max(...shakespeare.map(d => d.size || 0))],
range: [blue, green]
range: [blue, green],
});
const data = stratify()
.id(d => d.id)
.parentId(d => d.parent)(shakespeare)
.sum(d => d.size || 0);
export default ({
width,
height,
margin = {
top: 0,
left: 30,
right: 40,
bottom: 80
}
}) => {
const yMax = height - margin.top - margin.bottom;
const root = hierarchy(data).sort((a, b) => b.value - a.value);
const tileMethods = {
treemapSquarify,
treemapBinary,
treemapDice,
treemapResquarify,
treemapSlice,
treemapSliceDice,
};
return (
<svg width={width} height={height}>
<rect width={width} height={height} rx={14} fill={bg} />
<Treemap
root={root}
size={[width, yMax]}
tile={treemapSquarify}
round={true}
>
{treemap => {
const nodes = treemap.descendants().reverse();
return (
<Group top={margin.top}>
{nodes.map((node, i) => {
const width = node.x1 - node.x0;
const height = node.y1 - node.y0;
export default class extends React.Component {
state = {
tileMethod: 'treemapSquarify',
};
render() {
const {
width,
height,
// events = false,
margin = {
top: 0,
left: 30,
right: 40,
bottom: 80,
},
} = this.props;
const { tileMethod } = this.state;
if (width < 10) return null;
const yMax = height - margin.top - margin.bottom;
const root = hierarchy(data).sort((a, b) => b.value - a.value);
return (
<div>
<label>tile method</label>{' '}
<select
onClick={e => e.stopPropagation()}
onChange={e => this.setState({ tileMethod: e.target.value })}
value={tileMethod}
>
{Object.keys(tileMethods).map(tile => (
<option key={tile} value={tile}>
{tile}
</option>
))}
</select>
<div>
<svg width={width} height={height}>
<rect width={width} height={height} rx={14} fill={bg} />
<Treemap
top={margin.top}
root={root}
size={[width, yMax]}
tile={tileMethods[tileMethod]}
round
>
{treemap => {
const nodes = treemap.descendants().reverse();
return (
<Group key={\`treemap-node-\${i}\`} top={node.y0} left={node.x0}>
{node.depth == 1 && (
<rect
width={width}
height={height}
stroke={bg}
strokeWidth={4}
fill={'transparent'}
/>
)}
{node.depth > 2 && (
<rect
width={width}
height={height}
stroke={bg}
fill={colorScale(node.value)}
/>
)}
<Group>
{nodes.map((node, i) => {
const nodeWidth = node.x1 - node.x0;
const nodeHeight = node.y1 - node.y0;
return (
<Group key={\`node-\${i}\`} top={node.y0} left={node.x0}>
{node.depth === 1 && (
<rect
width={nodeWidth}
height={nodeHeight}
stroke={bg}
strokeWidth={4}
fill="transparent"
/>
)}
{node.depth > 2 && (
<rect
width={nodeWidth}
height={nodeHeight}
stroke={bg}
fill={colorScale(node.value)}
/>
)}
</Group>
);
})}
</Group>
);
})}
</Group>
);
}}
</Treemap>
</svg>
);
};
}}
</Treemap>
</svg>
</div>
</div>
);
}
}
`}
</Show>
);
Expand Down
6 changes: 5 additions & 1 deletion packages/vx-hierarchy/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"sideEffects": false,
"main": "lib/index.js",
"module": "esm/index.js",
"types": "lib/index.d.ts",
"files": [
"lib",
"esm"
Expand Down Expand Up @@ -33,12 +34,15 @@
"access": "public"
},
"dependencies": {
"@types/classnames": "^2.2.9",
"@types/d3-hierarchy": "^1.1.6",
"@types/react": "*",
"@vx/group": "0.0.192",
"classnames": "^2.2.5",
"d3-hierarchy": "^1.1.4",
"prop-types": "^15.6.1"
},
"peerDependencies": {
"react": "^15.0.0-0 || ^16.0.0-0"
"react": "^16.3.0-0"
}
}
Loading

0 comments on commit a381159

Please sign in to comment.