export default function Treemap({
top,
left,
className,
root,
tile,
size,
round,
padding,
paddingInner,
paddingOuter,
paddingTop,
paddingRight,
paddingBottom,
paddingLeft,
children,
nodeComponent = DefaultNode,
...restProps
}) {
const treemap = d3treemap();
if (tile) treemap.tile(tile);
if (size) treemap.size(size);
if (round) treemap.round(round);
if (padding) treemap.padding(padding);
if (paddingInner) treemap.paddingInner(paddingInner);
if (paddingOuter) treemap.paddingOuter(paddingOuter);
if (paddingTop) treemap.paddingTop(paddingTop);
if (paddingRight) treemap.paddingRight(paddingRight);
if (paddingBottom) treemap.paddingBottom(paddingBottom);
if (paddingLeft) treemap.paddingLeft(paddingLeft);
const data = treemap(root);
if (!!children) {
return (
<Group top={top} left={left} className={cx('vx-treemap', className)}>
{children({ data })}
</Group>
);
}
return (
<Group top={top} left={left} className={cx('vx-treemap', className)}>
{nodeComponent &&
data.descendants().map((node, i) => {
return (
<Group key={`treemap-node-${i}`}>
{React.createElement(nodeComponent, { node })}
</Group>
);
})}
</Group>
);
}
prototype.layout = function() {
var x = treemap();
x.ratio = function(_) {
var t = x.tile();
if (t.ratio) x.tile(t.ratio(_));
};
x.method = function(_) {
if (Tiles.hasOwnProperty(_)) x.tile(Tiles[_]);
else error('Unrecognized Treemap layout method: ' + _);
};
return x;
};
/**
* Treemap layout generator. Adds 'method' and 'ratio' parameters
* to configure the underlying tile method.
*/
function treemapLayout() {
var x = treemap();
x.ratio = function(_) {
var t = x.tile();
if (t.ratio) x.tile(t.ratio(_));
};
x.method = function(_) {
if (TILES.has(_)) x.tile(TILES.get(_));
else error('Unrecognized Treemap layout method: ' + _);
};
return x;
}
function transform(dataView, options) {
if (dataView.dataType !== HIERARCHY) {
throw new TypeError('Invalid DataView: This transform is for Hierarchy data only!');
}
const root = dataView.root;
options = assign({}, DEFAULT_OPTIONS, options);
const as = options.as;
if (!isArray(as) || as.length !== 2) {
throw new TypeError('Invalid as: it must be an array with 2 strings (e.g. [ "x", "y" ])!');
}
let field;
try {
field = getField(options);
} catch (e) {
console.warn(e);
}
if (field) {
root.sum(d => d[field]);
}
const treemapLayout = d3Hierarchy.treemap();
treemapLayout
.tile(d3Hierarchy[options.tile])
.size(options.size)
.round(options.round)
.padding(options.padding)
.paddingInner(options.paddingInner)
.paddingOuter(options.paddingOuter)
.paddingTop(options.paddingTop)
.paddingRight(options.paddingRight)
.paddingBottom(options.paddingBottom)
.paddingLeft(options.paddingLeft);
treemapLayout(root);
/*
* points:
* 3 2
* 0 1
*/
const x = as[0];
const y = as[1];
root.each(node => {
node[x] = [ node.x0, node.x1, node.x1, node.x0 ];
node[y] = [ node.y1, node.y1, node.y0, node.y0 ];
[ 'x0', 'x1', 'y0', 'y1' ].forEach(prop => {
if (as.indexOf(prop) === -1) {
delete node[prop];
}
});
});
}
/**
* Create the list of nodes to render.
* @returns {Array} Array of nodes.
* @private
*/
_getNodesToRender() {
const {innerWidth, innerHeight} = this.state;
const {data, mode, padding, sortFunction, getSize} = this.props;
if (!data) {
return [];
}
if (mode === 'partition' || mode === 'partition-pivot') {
const partitionFunction = partition()
.size(
mode === 'partition-pivot'
? [innerHeight, innerWidth]
: [innerWidth, innerHeight]
)
.padding(padding);
const structuredInput = hierarchy(data)
.sum(getSize)
.sort((a, b) => sortFunction(a, b, getSize));
const mappedNodes = partitionFunction(structuredInput).descendants();
if (mode === 'partition-pivot') {
return mappedNodes.map(node => ({
...node,
x0: node.y0,
x1: node.y1,
y0: node.x0,
y1: node.x1
}));
}
return mappedNodes;
}
if (mode === 'circlePack') {
const packingFunction = pack()
.size([innerWidth, innerHeight])
.padding(padding);
const structuredInput = hierarchy(data)
.sum(getSize)
.sort((a, b) => sortFunction(a, b, getSize));
return packingFunction(structuredInput).descendants();
}
const tileFn = TREEMAP_TILE_MODES[mode];
const treemapingFunction = treemap(tileFn)
.tile(tileFn)
.size([innerWidth, innerHeight])
.padding(padding);
const structuredInput = hierarchy(data)
.sum(getSize)
.sort((a, b) => sortFunction(a, b, getSize));
return treemapingFunction(structuredInput).descendants();
}