Merge 677d6d6 into 232d294

airbnb · May 6, 2020 · 18b552c · 18b552c
2 parents 232d294 + 677d6d6
commit 18b552c
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 16 deletions.
diff --git a/packages/vx-demo/src/components/Gallery.tsx b/packages/vx-demo/src/components/Gallery.tsx
@@ -26,7 +26,7 @@ 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';
 import Dendrograms from './tiles/Dendrograms';
-import Voronoi from './tiles/Voronoi';
+import Voronoi from '../docs-v2/examples/vx-voronoi/Example';
 import Legends from './tiles/Legends';
 import StatsPlot from './tiles/Statsplot';
 import GeoCustom from '../docs-v2/examples/vx-geo-custom/Example';

diff --git a/.../vx-demo/src/components/tiles/Voronoi.tsx → ...c/docs-v2/examples/vx-voronoi/Example.tsx b/.../vx-demo/src/components/tiles/Voronoi.tsx → ...c/docs-v2/examples/vx-voronoi/Example.tsx
@@ -4,7 +4,6 @@ import { GradientOrangeRed, GradientPinkRed } from '@vx/gradient';
 import { RectClipPath } from '@vx/clip-path';
 import { voronoi, VoronoiPolygon } from '@vx/voronoi';
 import { localPoint } from '@vx/event';
-import { ShowProvidedProps } from '../../types';
 
 type Datum = {
   x: number;
@@ -22,18 +21,20 @@ const data: Datum[] = new Array(150).fill(null).map(() => ({
 
 const neighborRadius = 75;
 
-export default ({
-  width,
-  height,
-  margin = {
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 76,
-  },
-}: ShowProvidedProps) => {
-  if (width < 10) return <div />;
+const defaultMargin = {
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 76,
+};
+
+type Props = {
+  width: number;
+  height: number;
+  margin?: { top: number; right: number; bottom: number; left: number };
+};
 
+export default ({ width, height, margin = defaultMargin }: Props) => {
   const innerWidth = width - margin.left - margin.right;
   const innerHeight = height - margin.top - margin.bottom;
 
@@ -53,7 +54,7 @@ export default ({
   const [hoveredId, setHoveredId] = useState<string | null>(null);
   const [neighborIds, setNeighborIds] = useState<Set<string>>(new Set());
 
-  return (
+  return width < 10 ? null : (
     <svg width={width} height={height} ref={svgRef}>
       <GradientOrangeRed id="voronoi_orange_red" />
       <GradientPinkRed id="voronoi_pink_red" />

diff --git a/packages/vx-demo/src/docs-v2/examples/vx-voronoi/index.tsx b/packages/vx-demo/src/docs-v2/examples/vx-voronoi/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-voronoi/package.json b/packages/vx-demo/src/docs-v2/examples/vx-voronoi/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "@vx/demo-voronoi",
+  "description": "Standalone vx voronoi demo.",
+  "main": "index.tsx",
+  "dependencies": {
+    "@babel/runtime": "^7.8.4",
+    "@types/react": "^16",
+    "@types/react-dom": "^16",
+    "@vx/clip-path": "latest",
+    "@vx/event": "latest",
+    "@vx/gradient": "latest",
+    "@vx/group": "latest",
+    "@vx/responsive": "latest",
+    "@vx/voronoi": "latest",
+    "react": "^16.8",
+    "react-dom": "^16.8",
+    "react-scripts-ts": "3.1.0",
+    "typescript": "^3"
+  },
+  "keywords": [
+    "visualization",
+    "d3",
+    "react",
+    "vx",
+    "voronoi"
+  ]
+}
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-voronoi/sandbox-styles.css b/packages/vx-demo/src/docs-v2/examples/vx-voronoi/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/Voronoi.tsx b/packages/vx-demo/src/pages/Voronoi.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Show from '../components/Show';
-import VoronoiChart from '../components/tiles/Voronoi';
-import VoronoiChartSource from '!!raw-loader!../components/tiles/Voronoi';
+import VoronoiChart from '../docs-v2/examples/vx-voronoi/Example';
+import VoronoiChartSource from '!!raw-loader!../docs-v2/examples/vx-voronoi/Example';
 
 export default () => {
   return (
@@ -15,6 +15,7 @@ export default () => {
       }}
       component={VoronoiChart}
       title="Voronoi"
+      codeSandboxDirectoryName="vx-voronoi"
     >
       {VoronoiChartSource}
     </Show>