Merge pull request #682 from hshoff/chris--sandbox-treemap

new(vx-demo): convert Treemap to codesandbox
airbnb · May 12, 2020 · 5a76f3d · 5a76f3d
2 parents fc3fc60 + 7e363b7
commit 5a76f3d
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 27 deletions.
diff --git a/packages/vx-demo/src/components/Gallery.tsx b/packages/vx-demo/src/components/Gallery.tsx
@@ -37,7 +37,10 @@ import Streamgraph, {
 } from '../docs-v2/examples/vx-streamgraph/Example';
 import Pack from '../docs-v2/examples/vx-pack/Example';
 import Patterns from '../docs-v2/examples/vx-pattern/Example';
-import Treemap from './tiles/Treemap';
+import Treemap, {
+  bg as treemapBackground,
+  color1 as treemapTextColor,
+} from '../docs-v2/examples/vx-treemap/Example';
 import Radar, {
   bg as radarBackground,
   pumpkin as radarColor,
@@ -648,18 +651,24 @@ export default function Gallery() {
             <div
               className="gallery-item"
               style={{
-                background: '#3436b8',
+                background: treemapBackground,
               }}
             >
               <div className="image">
                 <ParentSize>
-                  {({ width, height }) => <Treemap width={width} height={height + detailsHeight} />}
+                  {({ width, height }) => (
+                    <Treemap
+                      width={width}
+                      height={height + detailsHeight}
+                      margin={{ top: 0, left: 10, right: 10, bottom: detailsHeight }}
+                    />
+                  )}
                 </ParentSize>
               </div>
               <div
                 className="details"
                 style={{
-                  color: '#00ff70',
+                  color: treemapTextColor,
                 }}
               >
                 <div className="title">Treemap</div>

diff --git a/.../vx-demo/src/components/tiles/Treemap.tsx → ...c/docs-v2/examples/vx-treemap/Example.tsx b/.../vx-demo/src/components/tiles/Treemap.tsx → ...c/docs-v2/examples/vx-treemap/Example.tsx
@@ -15,15 +15,14 @@ import { TileMethod } from '@vx/hierarchy/lib/types';
 import shakespeare, { Shakespeare } from '@vx/mock-data/lib/mocks/shakespeare';
 
 import { scaleLinear } from '@vx/scale';
-import { ShowProvidedProps } from '../../types';
 
-const blue = '#0373d9';
-const green = '#00ff70';
-const bg = '#3436b8';
+export const color1 = '#f3e9d2';
+const color2 = '#4281a4';
+export const bg = '#114b5f';
 
 const colorScale = scaleLinear<string>({
   domain: [0, Math.max(...shakespeare.map(d => d.size || 0))],
-  range: [blue, green],
+  range: [color2, color1],
 });
 
 const data = stratify<Shakespeare>()
@@ -40,24 +39,21 @@ const tileMethods: { [tile: string]: TileMethod<typeof data> } = {
   treemapSliceDice,
 };
 
-export default function TreemapDemo({
-  width,
-  height,
-  margin = {
-    top: 0,
-    left: 30,
-    right: 40,
-    bottom: 80,
-  },
-}: ShowProvidedProps) {
-  const [tileMethod, setTileMethod] = useState<string>('treemapSquarify');
+const defaultMargin = { top: 10, left: 10, right: 10, bottom: 10 };
 
-  if (width < 10) return null;
+type Props = {
+  width: number;
+  height: number;
+  margin?: { top: number; right: number; bottom: number; left: number };
+};
 
+export default function TreemapDemo({ width, height, margin = defaultMargin }: Props) {
+  const [tileMethod, setTileMethod] = useState<string>('treemapSquarify');
+  const xMax = width - margin.left - margin.right;
   const yMax = height - margin.top - margin.bottom;
   const root = hierarchy(data).sort((a, b) => (b.value || 0) - (a.value || 0));
 
-  return (
+  return width < 10 ? null : (
     <div>
       <label>tile method</label>{' '}
       <select
@@ -77,7 +73,7 @@ export default function TreemapDemo({
           <Treemap<typeof data>
             top={margin.top}
             root={root}
-            size={[width, yMax]}
+            size={[xMax, yMax]}
             tile={tileMethods[tileMethod]}
             round
           >
@@ -90,7 +86,11 @@ export default function TreemapDemo({
                     const nodeWidth = node.x1 - node.x0;
                     const nodeHeight = node.y1 - node.y0;
                     return (
-                      <Group key={`node-${i}`} top={node.y0} left={node.x0}>
+                      <Group
+                        key={`node-${i}`}
+                        top={node.y0 + margin.top}
+                        left={node.x0 + margin.left}
+                      >
                         {node.depth === 1 && (
                           <rect
                             width={nodeWidth}

diff --git a/packages/vx-demo/src/docs-v2/examples/vx-treemap/index.tsx b/packages/vx-demo/src/docs-v2/examples/vx-treemap/index.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from 'react-dom';
+import ParentSize from '@vx/responsive/lib/components/ParentSize';
+
+import Example from './Example';
+import './sandbox-styles.css';
+
+render(
+  <ParentSize>{({ width, height }) => <Example width={width} height={height} />}</ParentSize>,
+  document.getElementById('root'),
+);
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-treemap/package.json b/packages/vx-demo/src/docs-v2/examples/vx-treemap/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "@vx/demo-treemap",
+  "description": "Standalone vx treemap demo.",
+  "main": "index.tsx",
+  "dependencies": {
+    "@babel/runtime": "^7.8.4",
+    "@types/react": "^16",
+    "@types/react-dom": "^16",
+    "@vx/group": "latest",
+    "@vx/hierarchy": "latest",
+    "@vx/mock-data": "latest",
+    "@vx/responsive": "latest",
+    "@vx/scale": "latest",
+    "react": "^16.8",
+    "react-dom": "^16.8",
+    "react-scripts-ts": "3.1.0",
+    "typescript": "^3"
+  },
+  "keywords": [
+    "visualization",
+    "d3",
+    "react",
+    "vx",
+    "treemap",
+    "hierarchy"
+  ]
+}
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-treemap/sandbox-styles.css b/packages/vx-demo/src/docs-v2/examples/vx-treemap/sandbox-styles.css
@@ -0,0 +1,8 @@
+html,
+body,
+#root {
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+    'Open Sans', 'Helvetica Neue', sans-serif;
+  line-height: 2em;
+}
diff --git a/packages/vx-demo/src/pages/Treemap.tsx b/packages/vx-demo/src/pages/Treemap.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import Show from '../components/Show';
-import Treemap from '../components/tiles/Treemap';
-import TreemapSource from '!!raw-loader!../components/tiles/Treemap';
+import Treemap from '../docs-v2/examples/vx-treemap/Example';
+import TreemapSource from '!!raw-loader!../docs-v2/examples/vx-treemap/Example';
 
 export default () => {
   return (
-    <Show component={Treemap} title="Treemap">
+    <Show component={Treemap} title="Treemap" codeSandboxDirectoryName="vx-treemap">
       {TreemapSource}
     </Show>
   );