Merge pull request #146 from trainorpj/update-hierarchy-comps

Update hierarchy comps
airbnb · Sep 12, 2017 · abc6378 · abc6378
2 parents 2dab8ef + a3ee8ed
commit abc6378
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 46 deletions.
diff --git a/packages/vx-hierarchy/src/DefaultLink.js b/packages/vx-hierarchy/src/DefaultLink.js
@@ -0,0 +1,15 @@
+import React from "react";
+
+export default function DefaultLink({ link }) {
+  return (
+    <line
+      x1={link.source.x}
+      y1={link.source.y}
+      x2={link.target.x}
+      y2={link.target.y}
+      strokeWidth={2}
+      stroke="#999"
+      strokeOpacity={0.6}
+    />
+  );
+}
diff --git a/packages/vx-hierarchy/src/DefaultNode.js b/packages/vx-hierarchy/src/DefaultNode.js
@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function DefaultNode({ node }) {
+  return <circle cx={node.x} cy={node.y} r={15} fill="#21D4FD" />;
+}
diff --git a/packages/vx-hierarchy/src/hierarchies/Cluster.js b/packages/vx-hierarchy/src/hierarchies/Cluster.js
@@ -1,7 +1,9 @@
-import React from 'react';
-import cx from 'classnames';
-import { Group } from '@vx/group';
-import { cluster as d3cluster } from 'd3-hierarchy';
+import React from "react";
+import cx from "classnames";
+import { Group } from "@vx/group";
+import { cluster as d3cluster } from "d3-hierarchy";
+import DefaultLink from "../DefaultLink";
+import DefaultNode from "../DefaultNode";
 
 export default function Cluster({
   top,
@@ -11,8 +13,8 @@ export default function Cluster({
   size,
   nodeSize,
   separation,
-  linkComponent,
-  nodeComponent,
+  linkComponent = DefaultLink,
+  nodeComponent = DefaultNode,
   ...restProps
 }) {
   const cluster = d3cluster();
@@ -23,21 +25,23 @@ export default function Cluster({
   const links = data.links();
   const descendants = root.descendants();
   return (
-    <Group top={top} left={left}>
-      {linkComponent && links.map((link, i) => {
-        return (
-          <Group key={`cluster-link-${i}`}>
-            {React.createElement(linkComponent, { link })}
-          </Group>
-        );
-      })}
-      {nodeComponent && descendants.map((node, i) => {
-        return (
-          <Group key={`cluster-node-${i}`}>
-            {React.createElement(nodeComponent, { node })}
-          </Group>
-        );
-      })}
+    <Group top={top} left={left} className={cx("vx-cluster", className)}>
+      {linkComponent &&
+        links.map((link, i) => {
+          return (
+            <Group key={`cluster-link-${i}`}>
+              {React.createElement(linkComponent, { link })}
+            </Group>
+          );
+        })}
+      {nodeComponent &&
+        descendants.map((node, i) => {
+          return (
+            <Group key={`cluster-node-${i}`}>
+              {React.createElement(nodeComponent, { node })}
+            </Group>
+          );
+        })}
     </Group>
   );
-}
+}
diff --git a/packages/vx-hierarchy/src/hierarchies/Tree.js b/packages/vx-hierarchy/src/hierarchies/Tree.js
@@ -1,7 +1,9 @@
-import React from 'react';
-import cx from 'classnames';
-import { Group } from '@vx/group';
-import { tree as d3tree } from 'd3-hierarchy';
+import React from "react";
+import cx from "classnames";
+import { Group } from "@vx/group";
+import { tree as d3tree } from "d3-hierarchy";
+import DefaultLink from "../DefaultLink";
+import DefaultNode from "../DefaultNode";
 
 export default function Tree({
   top,
@@ -11,8 +13,8 @@ export default function Tree({
   size,
   nodeSize,
   separation,
-  linkComponent,
-  nodeComponent,
+  linkComponent = DefaultLink,
+  nodeComponent = DefaultNode,
   ...restProps
 }) {
   const tree = d3tree();
@@ -23,21 +25,23 @@ export default function Tree({
   const links = data.links();
   const descendants = root.descendants();
   return (
-    <Group top={top} left={left}>
-      {linkComponent && links.map((link, i) => {
-        return (
-          <Group key={`tree-link-${i}`}>
-            {React.createElement(linkComponent, { link })}
-          </Group>
-        );
-      })}
-      {nodeComponent && descendants.map((node, i) => {
-        return (
-          <Group key={`tree-node-${i}`}>
-            {React.createElement(nodeComponent, { node })}
-          </Group>
-        );
-      })}
+    <Group top={top} left={left} className={cx("vx-tree", className)}>
+      {linkComponent &&
+        links.map((link, i) => {
+          return (
+            <Group key={`tree-link-${i}`}>
+              {React.createElement(linkComponent, { link })}
+            </Group>
+          );
+        })}
+      {nodeComponent &&
+        descendants.map((node, i) => {
+          return (
+            <Group key={`tree-node-${i}`}>
+              {React.createElement(nodeComponent, { node })}
+            </Group>
+          );
+        })}
     </Group>
   );
-}
+}
diff --git a/packages/vx-hierarchy/src/index.js b/packages/vx-hierarchy/src/index.js
@@ -1,2 +1,4 @@
-export { default as Tree } from './hierarchies/Tree';
-export { default as Cluster } from './hierarchies/Cluster';
+export { default as Tree } from "./hierarchies/Tree";
+export { default as Cluster } from "./hierarchies/Cluster";
+export { default as DefaultLink } from "./DefaultLink";
+export { default as DefaultNode } from "./DefaultNode";
diff --git a/packages/vx-hierarchy/test/Defaults.test.js b/packages/vx-hierarchy/test/Defaults.test.js
@@ -0,0 +1,13 @@
+import { DefaultLink, DefaultNode } from "../src";
+
+describe("<DefaultLink />", () => {
+  test("it should be defined", () => {
+    expect(DefaultLink).toBeDefined();
+  });
+});
+
+describe("<DefaultNode />", () => {
+  test("it should be defined", () => {
+    expect(DefaultNode).toBeDefined();
+  });
+});