new(vx-demo): convert Heatmap to codesandbox

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

@@ -21,7 +21,7 @@ import BarGroup from './tiles/BarGroup';
 import BarGroupHorizontal from './tiles/BarGroupHorizontal';
 import BarStack from './tiles/BarStack';
 import BarStackHorizontal from './tiles/BarStackHorizontal';
-import Heatmap from './tiles/Heatmap';
+import Heatmap 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';
@@ -328,7 +328,7 @@ export default function Gallery() {
           </Link>
         </Tilt>
         <Tilt className="tilt" options={tiltOptions}>
-          <Link href="/heatmaps">
+          <Link href="/heatmap">
             <div className="gallery-item" style={{ background: '#28272c' }}>
               <div className="image">
                 <ParentSize>

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,27 +47,27 @@ 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 }) => {
+}: Props) => {
   if (width < 10) return null;
 
   // bounds
-  let size = width;
-  if (size > margin.left + margin.right) {
-    size = width - margin.left - margin.right - separation;
-  }
-
-  const xMax = size / 2;
+  const xMax = width / 2;
   const yMax = height - margin.bottom - margin.top;
 
   const binWidth = xMax / binData.length;

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 → packages/vx-demo/src/pages/Heatmap.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 Heatmap from '../docs-v2/examples/vx-heatmap/Example';
+import HeatmapSource from '!!raw-loader!../docs-v2/examples/vx-heatmap/Example';
 
 export default () => {
   return (
@@ -15,6 +15,7 @@ export default () => {
       }}
       component={Heatmap}
       title="Heatmaps"
+      codeSandboxDirectoryName="vx-heatmap"
     >
       {HeatmapSource}
     </Show>