mirror of
https://github.com/codedownio/time-ghc-modules.git
synced 2024-09-11 05:25:40 +03:00
Try using react-d3-treemap
This commit is contained in:
parent
5484f61a96
commit
c6727027f6
@ -1,10 +1,13 @@
|
||||
|
||||
import {useMemo} from "react";
|
||||
|
||||
import D3TreeMap from "./D3TreeMap";
|
||||
import buildNestedData from "./TreeMap/BuildData";
|
||||
import {formatBytes, formatTime} from "./Util";
|
||||
|
||||
// import D3TreeMap from "./D3TreeMap";
|
||||
|
||||
import D3TreeMap from "react-d3-treemap";
|
||||
import "react-d3-treemap/dist/react.d3.treemap.css";
|
||||
|
||||
interface Props {
|
||||
aggregate: Aggregate;
|
||||
@ -20,13 +23,24 @@ export default function TreeMap({aggregate, data}: Props) {
|
||||
// Modes: squarify, resquarify, slice, dice, slicedice, binary, circlePack, partition, partition-pivot
|
||||
|
||||
return (
|
||||
<D3TreeMap
|
||||
<D3TreeMap<Tree<TreeNode>>
|
||||
id="myTreeMap"
|
||||
width={500}
|
||||
height={500}
|
||||
height={400}
|
||||
data={nestedData}
|
||||
labelFn={(x) => x.name}
|
||||
subLabelFn={(x) => aggregate === "time" ? formatTime(x.size) : formatBytes(x.size)}
|
||||
valueFn={(x) => x.size}
|
||||
/>
|
||||
valueUnit={aggregate === "time" ? "us" : "B"}
|
||||
levelsToDisplay={2}
|
||||
/>
|
||||
);
|
||||
|
||||
// return (
|
||||
// <D3TreeMap
|
||||
// width={500}
|
||||
// height={500}
|
||||
// data={nestedData}
|
||||
// labelFn={(x) => x.name}
|
||||
// subLabelFn={(x) => aggregate === "time" ? formatTime(x.value) : formatBytes(x.value)}
|
||||
// valueFn={(x) => x.value}
|
||||
// />
|
||||
// );
|
||||
}
|
||||
|
@ -8,7 +8,7 @@ export default function buildNestedData(
|
||||
) {
|
||||
const ret: Tree<TreeNode> = {
|
||||
name: "Top-level",
|
||||
size: 0,
|
||||
value: 0,
|
||||
part: "",
|
||||
children: [],
|
||||
};
|
||||
@ -26,17 +26,17 @@ export default function buildNestedData(
|
||||
item = {
|
||||
name: soFar,
|
||||
part,
|
||||
size: 0,
|
||||
value: 0,
|
||||
children: [],
|
||||
};
|
||||
current.children.push(item);
|
||||
}
|
||||
current = item;
|
||||
current.size += (aggregate === "time" ? m["time"]: m["alloc"]);
|
||||
current.value += (aggregate === "time" ? m["time"]: m["alloc"]);
|
||||
}
|
||||
}
|
||||
forEach(ret.children, (x) => {
|
||||
ret.size += x.size;
|
||||
ret.value += x.value;
|
||||
});
|
||||
|
||||
console.log("Built nestedData", ret);
|
||||
|
2
src/types.d.ts
vendored
2
src/types.d.ts
vendored
@ -27,5 +27,5 @@ interface TreeNode {
|
||||
name: string;
|
||||
part: string;
|
||||
color?: string;
|
||||
size: number;
|
||||
value: number;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user