Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

typescript(vx-hierarchy): re-write package in TypeScript #524

Merged
merged 10 commits into from
Oct 9, 2019
Merged

typescript(vx-hierarchy): re-write package in TypeScript #524

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7b2dfc6
typescript(vx-hierarchy): add typescript deps, add types to package.json
Sep 27, 2019
70e1353
typescript(vx-hierarchy): rename js/jsx => ts/tsx
Sep 27, 2019
d924c4d
typescript(vx-hierarchy): re-write package in TypeScript
Sep 27, 2019
2a2ca35
test(vx-hierarchy): add more tests for new exports
Sep 27, 2019
51140e5
fix(vx-hierarchy/Tree): import type to fix ref error
Sep 27, 2019
95f7c0b
new(vx-hierarchy): export d3-hierarchy stratify
Sep 27, 2019
54935a3
new(vx-demo): update treemap tile + pages with tile method select
Sep 27, 2019
52446ac
lint(vx-hierarchy)
Sep 27, 2019
f042732
fix(vx-hierarchy): fix tests and types, require react@^16.3.0
Sep 27, 2019
c680f76
Merge branch 'master' into chris--typescript-vx-hierarchy
williaster Oct 4, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
156 changes: 103 additions & 53 deletions packages/vx-demo/src/components/tiles/treemap.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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