Merge pull request #676 from hshoff/chris--sandbox-heatmap

new(vx-demo): convert Heatmap to codesandbox

packages/vx-demo/src/components/Gallery.tsx

@@ -27,7 +27,7 @@ import BarStackHorizontal, {
   background as horizontalBarstackBackground,
   purple3 as horiztonalBarstackTextColor,
 } from '../docs-v2/examples/vx-barstack-horizontal/Example';
-import Heatmap from './tiles/Heatmap';
+import Heatmaps from '../docs-v2/examples/vx-heatmap/Example';
 import LineRadial from '../docs-v2/examples/vx-shape-line-radial/Example';
 import Pies from '../docs-v2/examples/vx-shape-pie/Example';
 import Trees from './tiles/Trees';
@@ -346,7 +346,9 @@ export default function Gallery() {
             <div className="gallery-item" style={{ background: '#28272c' }}>
               <div className="image">
                 <ParentSize>
-                  {({ width, height }) => <Heatmap width={width} height={height + detailsHeight} />}
+                  {({ width, height }) => (
+                    <Heatmaps width={width} height={height + detailsHeight} />
+                  )}
                 </ParentSize>
               </div>
               <div className="details" style={{ color: 'rgba(255,255,255,0.3)' }}>

packages/vx-demo/src/components/tiles/Heatmap.tsx → packages/vx-demo/src/docs-v2/examples/vx-heatmap/Example.tsx

@@ -3,7 +3,6 @@ import { Group } from '@vx/group';
 import genBins, { Bin, Bins } from '@vx/mock-data/lib/generators/genBins';
 import { scaleLinear } from '@vx/scale';
 import { HeatmapCircle, HeatmapRect } from '@vx/heatmap';
-import { ShowProvidedProps } from '../../types';
 
 const hot1 = '#77312f';
 const hot2 = '#f33d15';
@@ -48,26 +47,26 @@ const opacityScale = scaleLinear<number>({
   domain: [0, colorMax],
 });
 
+type Props = {
+  width: number;
+  height: number;
+  margin?: { top: number; right: number; bottom: number; left: number };
+  separation?: number;
+  events?: boolean;
+};
+
+const defaultMargin = { top: 10, left: 20, right: 20, bottom: 110 };
+
 export default ({
   width,
   height,
   events = false,
-  margin = {
-    top: 10,
-    left: 20,
-    right: 20,
-    bottom: 110,
-  },
+  margin = defaultMargin,
   separation = 20,
-}: ShowProvidedProps & { separation?: number }) => {
-  if (width < 10) return null;
-
+}: Props) => {
   // bounds
-  let size = width;
-  if (size > margin.left + margin.right) {
-    size = width - margin.left - margin.right - separation;
-  }
-
+  const size =
+    width > margin.left + margin.right ? width - margin.left - margin.right - separation : width;
   const xMax = size / 2;
   const yMax = height - margin.bottom - margin.top;
 
@@ -78,7 +77,7 @@ export default ({
   xScale.range([0, xMax]);
   yScale.range([yMax, 0]);
 
-  return (
+  return width < 10 ? null : (
     <svg width={width} height={height}>
       <rect x={0} y={0} width={width} height={height} rx={14} fill={bg} />
       <Group top={margin.top} left={margin.left}>

packages/vx-demo/src/docs-v2/examples/vx-heatmap/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'),
+);

packages/vx-demo/src/docs-v2/examples/vx-heatmap/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@vx/demo-heatmap",
+  "description": "Standalone vx heatmap demo.",
+  "main": "index.tsx",
+  "dependencies": {
+    "@babel/runtime": "^7.8.4",
+    "@types/react": "^16",
+    "@types/react-dom": "^16",
+    "@vx/group": "latest",
+    "@vx/heatmap": "latest",
+    "@vx/mock-data": "latest",
+    "@vx/responsive": "latest",
+    "@vx/scale": "latest",
+
+    "react": "^16",
+    "react-dom": "^16",
+    "react-scripts-ts": "3.1.0",
+    "typescript": "^3"
+  },
+  "keywords": [
+    "visualization",
+    "d3",
+    "react",
+    "vx",
+    "heatmap"
+  ]
+}

packages/vx-demo/src/docs-v2/examples/vx-heatmap/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;
+}

packages/vx-demo/src/pages/Heatmaps.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import Heatmap from '../components/tiles/Heatmap';
-import HeatmapSource from '!!raw-loader!../components/tiles/Heatmap';
+import Heatmaps from '../docs-v2/examples/vx-heatmap/Example';
+import HeatmapsSource from '!!raw-loader!../docs-v2/examples/vx-heatmap/Example';
 
 export default () => {
   return (
@@ -13,10 +13,11 @@ export default () => {
         right: 30,
         bottom: 80,
       }}
-      component={Heatmap}
+      component={Heatmaps}
       title="Heatmaps"
+      codeSandboxDirectoryName="vx-heatmap"
     >
-      {HeatmapSource}
+      {HeatmapsSource}
     </Show>
   );
 };